[mapserver-users] How to add marker on openlayers ?
Stephen Woodbridge
woodbri at swoodbridge.com
Sun Sep 23 11:36:17 PDT 2012
Sorry but this is an OpenLayers question and needs to be asked on the
OpenLayers list.
On 9/22/2012 12:09 PM, 李杨 wrote:
> I before use a map,then I can add markers. But when I use mapcache
> tile the map, then why can not show the markers
>
> the former js code like this:, the marker can show, and it is not a tile map .
> ------------------------------------------------------------------------------------------
> <!DOCTYPE html>
> <html>
> <head>
> <title>India Mapserver</title>
> <script src="http://openlayers.org/api/OpenLayers.js"></script>
> <script type="text/javascript">
>
> var map,baseLayer;
> var lat;
> var lng;
> var pointslng = [];
> var pointslat = [];
> var objNodeList;
> var Node;
> var format;
> var isChrome;
>
> try //Internet Explorer
> {
> xdoc=new ActiveXObject("Microsoft.XMLDOM");
> }
> catch(e)
> {
> try //Firefox, Mozilla, Opera, etc.
> {
> xdoc=document.implementation.createDocument("","",null);
> }
> catch(e) {alert(e.message)}
> }
> try
> {
> xdoc.async=false;
> xdoc.load("getDeviceInfo.php.xml");
> }
> catch(e) {
>
> isChrome=true;
> xdoc = null;
> }
> if(isChrome)
> {
> var xmlhttp = new XMLHttpRequest();
> xmlhttp.open("GET","http://61.149.194.113/getDeviceInfo.php.xml",false);
> xmlhttp.send(null);
> xdoc = xmlhttp.responseXML;
> }
>
> nodes = xdoc.documentElement.childNodes;
> objNodeList = xdoc.getElementsByTagName("marker");
> for ( var i=0; i<objNodeList.length; i++)
> {
>
> Node =objNodeList[i];
> for (var k=0; k< Node.attributes.length; k++)
> {
> if(Node.attributes[k].nodeName == "lng")
> lng = Node.attributes[k].nodeValue;
> if(Node.attributes[k].nodeName == "lat")
> lat = Node.attributes[k].nodeValue;
> }
> pointslng.push( lng ) ;
> pointslat.push( lat ) ;
> }
>
> function init() {
>
> // The overlay layer for our marker, with a simple diamond as symbol
> var overlay = new OpenLayers.Layer.Vector('Overlay', {
> styleMap: new OpenLayers.StyleMap({
> externalGraphic: 'marker.png',
> graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
> title: '${tooltip}'
> })
> });
>
> for (var l=0; l< pointslng.length; l++)
> {
> // The location of our marker and popup. We usually think in geographic
> // coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
> var myLocation = new OpenLayers.Geometry.Point( pointslng[l],pointslat[l])
> .transform('EPSG:4326', 'EPSG:3857');
>
> // We add the marker with a tooltip text to the overlay
> overlay.addFeatures([
> new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
> ]);
> }
> // A popup with some information about our location
> var popup = new OpenLayers.Popup.FramedCloud("Popup",
> myLocation.getBounds().getCenterLonLat(), null,
> '<a target="_blank" href="http://openlayers.org/">We</a> ' +
> 'could be here.<br>Or elsewhere.', null,
> true // <-- true if we want a close (X) button, false otherwise
> );
>
> map = new OpenLayers.Map({
> div:"map",projection:"EPSG:3857",
> layers:[ new OpenLayers.Layer.MapServer("OSM
> map","/cgi-bin/mapserv?",{map:"/root/osm-demo/basemaps/osm-google.map",layers:"all",map_image_type:"png"},{singleTile:true,ratio:1.0})],
> center:myLocation.getBounds().getCenterLonLat(),zoom:5});
> map.addLayer(overlay);
>
>
>
> }
>
> </script>
>
> <style>
> @media screen
> {
> #map{width: 800px; height:400px; border: 2px solid black;}
>
>
> }
> </style>
>
> </head>
> <body onload="init()">
> <h3>India Mapserver</h3>
> <div id="map"></div>
> </body>
> </html>
> --------------------------------------------------------------------------------------------
>
> For reason fast the map show, I use mapcache,
> when i use the mapcache tile map.
>
> I just use the add-marker code before add to this one:
>
> ______________________________________________________
>
> <html="http://www.w3.org/1999/xhtml">
> <head>
> <title>mod-mapcache demo service</title>
> <style type="text/css">
> #map {
> width: 100%;
> height: 100%;
> border: 1px solid black;
> }
> </style>
> <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
> <script type="text/javascript">
>
> var map,baseLayer;
> var lat;
> var lng;
> var pointslng = [];
> var pointslat = [];
> var objNodeList;
> var Node;
> var format;
> var isChrome;
>
> try //Internet Explorer
> {
> xdoc=new ActiveXObject("Microsoft.XMLDOM");
> }
> catch(e)
> {
> try //Firefox, Mozilla, Opera, etc.
> {
> xdoc=document.implementation.createDocument("","",null);
> }
> catch(e) {alert(e.message)}
> }
> try
> {
> xdoc.async=false;
> xdoc.load("getDeviceInfo.php.xml");
> }
> catch(e) {
>
> isChrome=true;
> xdoc = null;
> }
> if(isChrome)
> {
> var xmlhttp = new XMLHttpRequest();
> xmlhttp.open("GET","http://61.149.194.113/getDeviceInfo.php.xml",false);
> xmlhttp.send(null);
> xdoc = xmlhttp.responseXML;
> }
>
> nodes = xdoc.documentElement.childNodes;
> objNodeList = xdoc.getElementsByTagName("marker");
> for ( var i=0; i<objNodeList.length; i++)
> {
>
> Node =objNodeList[i];
> for (var k=0; k< Node.attributes.length; k++)
> {
> if(Node.attributes[k].nodeName == "lng")
> lng = Node.attributes[k].nodeValue;
> if(Node.attributes[k].nodeName == "lat")
> lat = Node.attributes[k].nodeValue;
> }
> pointslng.push( lng ) ;
> pointslat.push( lat ) ;
> }
>
>
> function init(){
> map = new OpenLayers.Map( 'map', {
> displayProjection: new OpenLayers.Projection("EPSG:4326")
> } );
> var osm_WGS84_tms_layer = new OpenLayers.Layer.TMS( "osm-WGS84-TMS",
> "http://61.149.194.113/mapcache/tms/",
> { layername: 'osm at WGS84', type: "png", serviceVersion:"1.0.0",
> gutter:0,buffer:0,isBaseLayer:true,transitionEffect:'resize',
> tileOrigin: new OpenLayers.LonLat(-180.000000,-90.000000),
> resolutions:[0.70312500000000000000,0.35156250000000000000,0.17578125000000000000,0.08789062500000000000,0.04394531250000000000,0.02197265625000000000,0.01098632812500000000,0.00549316406250000000,0.00274658203125000000,0.00137329101562500000,0.00068664550781250000,0.00034332275390625000,0.00017166137695312500,0.00008583068847656250,0.00004291534423828120,0.00002145767211914060,0.00001072883605957030,0.00000536441802978516],
> zoomOffset:0,
> units:"dd",
> maxExtent: new
> OpenLayers.Bounds(-180.000000,-90.000000,180.000000,90.000000),
> projection: new OpenLayers.Projection("EPSG:4326".toUpperCase()),
> sphericalMercator: false
> }
> );
> map.addLayer(osm_WGS84_tms_layer)
>
> var osm_g_tms_layer = new OpenLayers.Layer.TMS( "osm-g-TMS",
> "http://199.195.214.155/mapcache/tms/",
> { layername: 'osm at g', type: "png", serviceVersion:"1.0.0",
> gutter:0,buffer:0,isBaseLayer:true,transitionEffect:'resize',
> tileOrigin: new OpenLayers.LonLat(-20037508.342789,-20037508.342789),
> resolutions:[156543.03392804099712520838,78271.51696402048401068896,39135.75848201022745342925,19567.87924100512100267224,9783.93962050256050133612,4891.96981025128025066806,2445.98490512564012533403,1222.99245256282006266702,611.49622628141003133351,305.74811314070478829308,152.87405657035250783338,76.43702828517623970583,38.21851414258812695834,19.10925707129405992646,9.55462853564703173959,4.77731426782351586979,2.38865713391175793490,1.19432856695587897633,0.59716428347793950593],
> zoomOffset:0,
> units:"m",
> maxExtent: new
> OpenLayers.Bounds(-20037508.342789,-20037508.342789,20037508.342789,20037508.342789),
> projection: new OpenLayers.Projection("EPSG:900913".toUpperCase()),
> sphericalMercator: true
> }
> );
> map.addLayer(osm_g_tms_layer)
>
> var overlay = new OpenLayers.Layer.Vector('Overlay', {
> styleMap: new OpenLayers.StyleMap({
> externalGraphic: 'marker.png',
> graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
> title: '${tooltip}'
> })
> });
>
> for (var l=0; l< pointslng.length; l++)
> {
> // The location of our marker and popup. We usually think in geographic
> // coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
> var myLocation = new OpenLayers.Geometry.Point( pointslng[l],pointslat[l])
> .transform('EPSG:4326', 'EPSG:3857');
> alert("m");
> // We add the marker with a tooltip text to the overlay
> overlay.addFeatures([
> new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
> ]);
> }
>
> map.addLayers(overlay)
> alert("asd");
>
> if(!map.getCenter())
> map.zoomToMaxExtent();
> map.addControl(new OpenLayers.Control.LayerSwitcher());
> map.addControl(new OpenLayers.Control.MousePosition());
> }
> </script>
> </head>
>
> <body onload="init()">
> <div id="map">
> </div>
> </body>
> </html>
> ---------------------------------------------------------------------------------------
>
> the map load speed is very fast, but the marker disappear.
>
> The marker location info is in " latitude & longitute",
> I guess is the projection problem.
>
> Can anyone help me ?
>
>
>
>
More information about the mapserver-users
mailing list