Start with OpenLayers Library
I don’t only sew, I’m also a little geek. Even more since I stopped working.
So here I am, now learning OpenLayers. And it’s really not easy finding examples or clear tutorials. Even the API is not the greatest doc I’ve seen. So first, here is the js code to insert a map :
var init = function() {
var lon = 15000000;
var lat = -3000000;
OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
var map = new OpenLayers.Map('mapdiv', { controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326") }
);
var baseLayer = new OpenLayers.Layer.OSM();
map.addLayer(baseLayer);
map.addControl(new OpenLayers.Control.MousePosition());
var australiaPoint = new OpenLayers.LonLat(lon, lat);
map.setCenter(australiaPoint, 4);
}
On HTML part, you just need this :
<body onload="init()"> <div id="mapdiv"></div> </body>
Now I wanted to add draggable points or markers by clicking on the map. Here is the code to add draggable points :
// First create a vector; points style is defined by the vector
var vector = new OpenLayers.Layer.Vector("My Vector", {
styleMap: new OpenLayers.StyleMap({'default':{
strokeColor: "grey",
strokeOpacity: 1,
strokeWidth: 1,
fillColor: "lime",
fillOpacity: 0.5,
pointRadius: 6,
pointerEvents: "visiblePainted"
}})});
map.addLayer(vector);
// Then make the points of the vector draggable
var drag = new OpenLayers.Control.DragFeature(vector);
map.addControl(drag);
drag.activate();
var point = new OpenLayers.Control.DrawFeature(vector,
OpenLayers.Handler.Point);
map.addControl(point);
point.activate();
Now if you want to add this draggable marker 
by clicking on the map :
var featureStyle = {
fillColor:#00FF00,
strokeColor:#00FF00,
strokeWidth:3,
pointRadius:1,
externalGraphic:"./img/marker.png",
graphicWidth:25000,
graphicHeight:34,
graphicXOffset:-20/2,
graphicYOffset:-34,
label:"Drag me ...",
fontColor: #00FF00,
fontSize:"10px",
fontWeight:"bold",
labelAlign:"rm"
};
// Add a vector layer
var vectorL = new OpenLayers.Layer.Vector( "Vector Layer",
{styleMap:new OpenLayers.StyleMap(featureStyle)} );
map.addLayer( vectorL);
// Add a drag control to the vector layer
var dragVectorC = new OpenLayers.Control.DragFeature( vectorL,
{ onDrag:function(feature, pixel){if(feature.logger)
feature.logger.setHTML(feature);} } );
map.addControl( dragVectorC );
dragVectorC.activate();
map.events.register("click", map, function(e){
var lonlat = map.getLonLatFromViewPortPx(e.xy);
var p1 = new OpenLayers.Geometry.Point( lonlat.lon, lonlat.lat );
// Cloning the point used twice is crucial for correct dragging and formatting
var featureOb = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Collection([p1.clone()]) );
vectorL.addFeatures( [featureOb] );
});
Posté le : 12 janvier 2012 sous Geek, OpenLayers - Pas de commentaire.
Tags: Geek, OpenLayers
