[OSM-dev] openlayers/tiling server
Tim Waters (chippy)
chippy2005 at gmail.com
Thu May 7 19:47:17 BST 2009
HI Mohamad,
firstly this is more of an OpenLayers http://openlayers.org issue,
than OSM- so do visit there and have a look at their excellent API ,
gallery of examples and developer resources.
Saying that, try:
icon.clone()
And the projection of the map is EPSG:900913, so you'd need to give
the markers a location in that projection. (transform)
cheers,
Tim
2009/5/7 Mohamad Ali <Mohamad.ali at intellitrac.com.au>:
> Hi guys,
>
> After I build a test server for rendering maps, I edit this example to point
> to my tiling server
>
> http://openlayers.org/dev/examples/sundials-spherical-mercator.html
>
> it became like below,
>
>
>
> in this example I tried to put two markers on the map at 2 different couple
> of lon and lat,
>
> what I get is only one marker and not centered where it should be,
>
>
>
> what I have done wrong?
>
>
>
> Thanks
>
>
>
> <script type="text/javascript" src="OpenLayers.js"></script>
>
> <script type="text/javascript">
>
> var lon = 144;
>
> var lat = -37;
>
> var zoom = 5;
>
> var map;
>
>
>
> function init(){
>
> var options = {
>
> projection: new OpenLayers.Projection("EPSG:900913"),
>
> displayProjection: new OpenLayers.Projection("EPSG:4326"),
>
> units: "m",
>
> maxResolution: 156543.0339,
>
> maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
>
> 20037508.34, 20037508.34)
>
> };
>
> map = new OpenLayers.Map('map', options);
>
> var mapnik = new OpenLayers.Layer.TMS(
>
> "OpenStreetMap (Mapnik)",
>
> "http://192.168.1.79/tiles/",
>
> {
>
> type: 'png', getURL: osm_getTileURL,
>
> displayOutsideMaxExtent: true,
>
> attribution: '<a
> href="http://openstreetmap.org/">OpenStreetMap</a>'
>
> }
>
> );
>
>
>
> map.addLayers([mapnik]);
>
>
>
> var markers = new OpenLayers.Layer.Markers( "Markers" );
>
> map.addLayer(markers);
>
>
>
>
>
> var size = new OpenLayers.Size(50,50);
>
> calculateOffset = function(size) {
>
> return new OpenLayers.Pixel(-(size.w/2), -size.h);
> };
>
>
>
> var icon = new OpenLayers.Icon(
>
> 'http://boston.openguides.org/markers/AQUA.png',
>
> size, null, calculateOffset);
>
>
>
> à markers.addMarker(
>
> new OpenLayers.Marker(new OpenLayers.LonLat(144,-37),
> icon));
>
> à markers.addMarker(
>
> new OpenLayers.Marker(new OpenLayers.LonLat(-37,144),
> icon));
>
> map.addControl(new OpenLayers.Control.LayerSwitcher());
>
>
>
> map.zoomToExtent(
>
> new OpenLayers.Bounds(
>
> 68.774414, 11.381836, 123.662109, 34.628906
>
> ).transform(map.displayProjection, map.projection)
>
> );
>
> }
>
> function onPopupClose(evt) {
>
> select.unselectAll();
>
> }
>
>
>
>
>
> function osm_getTileURL(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 OpenLayers.Util.getImagesLocation() + "404.png";
>
> } else {
>
> x = ((x % limit) + limit) % limit;
>
> return this.url + z + "/" + x + "/" + y + "." + this.type;
>
> }
>
> }
>
> </script>
>
>
>
> _______________________________________________
> dev mailing list
> dev at openstreetmap.org
> http://lists.openstreetmap.org/listinfo/dev
>
>
More information about the dev
mailing list