[OSM-dev] Layer-markers, maxExtent

Thomas Wiedemann thomas.wiedemann at mecomo.com
Tue Feb 2 08:43:24 GMT 2010


Hi,

 

just 2 questions:

 

1)      How can I add markers to the map? I tried to do it like the "start-position"-marker but it doesn´t work. Can anyone please give an example?

 

2)      I think the map which will be loaded is bigger than it should be. What can I do to make the performance better? (loading for example)

 

 

I´m very thankful for help!

 

Mit freundlichen Grüßen

Best regards

 

Thomas Wiedemann

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html lang="de-de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type" />

<meta content="text/javascript" http-equiv="content-script-type" />

<meta id="MapAll" />

<title>Map</title>

<style type="text/css">

html, body {

     width: 240px;

     height: 268px;

     padding: 0px;

     margin: 0px;

     overflow: hidden;

}

#map {

     position: absolute;

     top: 0;

     left: 0;

     width: 240px;

     height: 268px;

     margin: 0px;

     padding: 0px;

}

</style>

<!--[if lte IE 6]>

<link href="../theme/default/ie6-style.css" rel="stylesheet" type="text/css" />

<![endif]-->

<script charset="UTF-8" src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>

<script charset="UTF-8" src="http://openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>

<script type="text/javascript">

                                                var lat = 48.28112416;

                                                var lon = 11.56468331;

                                                var zoom = 15;

                                                var layer_mapnik = null;

                                                var layer_tah = null;

                                                var layer_markers = null;

                                                var map = null;

                                                function drawmap()

                                                {

                                                    OpenLayers.Lang.setCode("de");

 

                                                    map = new OpenLayers.Map("map", {

                                                        projection: new OpenLayers.Projection("EPSG:900913"),

                                                        displayProjection: new OpenLayers.Projection("EPSG:4326"),

                                                        controls: [

                                                            new OpenLayers.Control.MouseDefaults(),

                                                            new OpenLayers.Control.LayerSwitcher(),

                                                            new OpenLayers.Control.PanZoomBar()],

                                                        maxExtent:

                                                            new OpenLayers.Bounds(-20037508.34,-20037508.34,

                                                                                    20037508.34, 20037508.34),

                                                        numZoomLevels: 18,

                                                        maxResolution: 156543,

                                                        units: "meters"

                                                    });

 

                                                    layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");

                                                    layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayInLayerSwitcher: false });

                                                                                                         

                                                    map.addLayers([layer_mapnik, layer_markers]);

    

                                                    // Position des Markers

                                                    jumpTo(lon, lat, zoom);

                                                    addMarker(layer_markers, lon, lat);

                                                    addMark

                                                                                                        }

                                                function jumpTo(lon, lat, zoom) {

                                                var x = Lon2Merc(lon);

                                                var y = Lat2Merc(lat);

                                                map.setCenter(new OpenLayers.LonLat(x, y), zoom);

                                                return false;

                                                }

 

                                                function Lon2Merc(lon) {

                                                    return 20037508.34 * lon / 180;

                                                }

 

                                                function Lat2Merc(lat) {

                                                    var PI = 3.14159265358979323846;

                                                    lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);

                                                    return 20037508.34 * lat / 180;

                                                }

 

                                                function addMarker(layer, lon, lat, popupContentHTML) {

 

                                                    var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));

                                                    var feature = new OpenLayers.Feature(layer, ll);

                                                    feature.closeBox = true;

                                                    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(30, 18) } );

                                                    feature.data.popupContentHTML = popupContentHTML;

                                                    feature.data.overflow = "hidden";

 

                                                    var marker = new OpenLayers.Marker(ll);

                                                    marker.feature = feature;

 

                                                    var markerClick = function(evt) {

                                                        if (this.popup == null) {

                                                            this.popup = this.createPopup(this.closeBox);

                                                            map.addPopup(this.popup);

                                                            this.popup.show();

                                                        } else {

                                                            this.popup.toggle();

                                                        }

                                                        OpenLayers.Event.stop(evt);

                                                    }

                                                    marker.events.register("mousedown", feature, markerClick);

 

                                                    layer.addMarker(marker);

                                                    map.addPopup(feature.createPopup(feature.closeBox));

                                                }

                                                function getCycleTileURL(bounds) {

                                                   var res = this.map.getResolution();

                                                   var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));

                                                   var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));

                                                   var z = this.map.getZoom();

                                                   var limit = Math.pow(2, z);

 

                                                   if (y < 0 || y >= limit)

                                                   {

                                                     return null;

                                                   }

                                                   else

                                                   { 

                                                     x = ((x % limit) + limit) % limit;

 

                                                     return this.url + z + "/" + x + "/" + y + "." + this.type;

                                                   }

                                                }

                                                </script>

</head>

 

<body onload="drawmap();">

 

<div id="map">

</div>

 

</body>

 

</html>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/dev/attachments/20100202/4754a75c/attachment.html>


More information about the dev mailing list