i am working with extjs and openlayers for trying some web application.
now i want to create a coordinate bookmark which click than take this coordinate...
but first of all, it must create a layer in which name is "Bookmarks"..when you click on it ita take to the this coordinate...
how can add a layer in which name is "Bookmarks" and how can i go taking coordinate from map...
If I understand your question correct, you will need a vector layer to display the bookmarks:
var my_bookmark_layer = new OpenLayers.Layer.Vector(
"Bookmarks",
}, {
displayInLayerSwitcher: true
});
map.addLayer(my_bookmark_layer);
This will add an empty layer which You can use later on.
To get a coordinate from the map, see this example in the OpenLayers example folder.
Then you will need to store the coordinate as a feature in the bookmark layer.
Hope it helps :)
Related
Is it possible to have multiple data layers using Google Maps API? The only existing related question I could find was this.
Here's my problem.
I want to have a data layer for showcasing polygons on map that are being drawn by the user. At the same time I want to have another data layer that displays polygons that already exist in a database.
I figured I would do this by creating 2 data layers:
drawLayer = new google.maps.Data();
savedLayer = new google.maps.Data();
But when I initialize the drawing tools using drawLayer.setControls(['Polygon']), it doesn't work. If I replace the drawLayer with map.data, then the drawing tools works fine. Why is that?
JSFiddle: http://jsfiddle.net/pjaLdz6w/
In your fiddle you aren't declaring drawLayer as a google.maps.Data object. But even if you do, you still need to give it a map attribute:
drawLayer = new google.maps.Data({map:map});
JSFiddle: http://jsfiddle.net/jbyd815y/
I just want to clarify whether my way of understanding is correct. In my Google Maps app I would like to show to my users markers from particular continents.
Question: Am I right that a bound in Google Map API is an area made from NOT MORE AND NOT LESS than two points (markers)?
From math lessons, to draw 2D area I just need two points. Right? So to show to my users all markers from Europe should I just find two coordinates, one from Iceland (top, left) and second from let's say south-east Turkey? (For USA I would pick Seattle and Miami).
So, below JS code works perfectly. My question is - could you confirm that my way of understanding and the approach I've chosen is correct? Does it make any sense?
var bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng('66.057878', '-22.579047')); // Iceland
bounds.extend(new google.maps.LatLng('37.961952', '43.878878')); // Turkey
this.map.fitBounds(bounds);
Yes, you are mostly correct. Except a 'bound' in Google maps case can include multiple points, for example if you had a point to the far right in the middle of the square in your image above and another at the bottom of the square in the middle you would still get an area the same as you have drawn above but with 3 points as in the edited map.
Obligatory link to the docs :)
https://developers.google.com/maps/documentation/javascript/reference?hl=en
You should not think about "top-left" and "bottom-right" but as south-west and north-east (so bottom-left and top-right if you like), as these are the coordinates used to create and/or retrieve the bounds object.
See the documentation and the getNorthEast and getSouthWest methods.
These two points are LatLng objects, and not markers. As an example, a marker is positioned on the map using a LatLng object.
I don't know your use case and your way of storing the data, but there might be a more precise way to display "Europe" markers. You could for example save the region along with each marker so that you can just query for "EU" markers and not others...
I have a student who is using MapBox.js (v1.6.0) to display some tiles that they made in TileMill. These tiles use the Tooltip functionality provided by TileMill (documentation) to add some interactivity. My student is also using a MapBox Streets layer to give some detailed views of roadways, etc. The problem is, when I use both of these layers together in the map, the interactivity from the tiles doesn't work.
Here is the code that doesn't work:
var map = L.mapbox.map("map");
var tilesOSM = L.mapbox.tileLayer("username.id1");
var tilesTileMill = L.mapbox.tileLayer("username.id2");
map
.addLayer(tilesOSM)
.addLayer(tilesTileMill)
.setView(L.latLng(61, -160.5), 4)
.setMaxBounds(L.latLngBounds(L.latLng(50,-180), L.latLng(72,-129)));
We have tried several iterations of this code, but the only way we can get it to work is by using the L.mapbox.map(3) method and then using the _ insertAtTheBottom_ parameter of the L.map.addLayer() function.
var map = L.mapbox.map("map", "username.id2", {});
map
.addLayer(L.mapbox.tileLayer("username.id1"), true)
.setView(L.latLng(61, -160.5), 4)
.setMaxBounds(L.latLngBounds(L.latLng(50,-180), L.latLng(72,-129)));
My question is three fold.
What is the difference between these two implementations?
Why is the tileLayer created using L.mapbox.tileLayer() different than the one created and automatically added using L.mapbox.map(3)?
Are there plans to address this discontinuity in future changes to the API or will support for interactive tiles be dropped in TileMill 2?
What is the difference between these two implementations?
If you check out what L.mapbox.map does internally, it adds a gridLayer and gridControl for the layer you specify. Basically the map constructor makes all of the safe assumptions it could make and does them automatically as a convenience.
Why is the tileLayer created using L.mapbox.tileLayer() different than the one created and automatically added using L.mapbox.map(3)?
It's the same - there's a gridLayer and gridControl in the mix when you use L.mapbox.map(3), and those are what make things interactive.
Are there plans to address this discontinuity in future changes to the API
It's not as much a discontinuity than an API design: we decided to keep tileLayers decoupled from gridLayers and gridControls so you can mix & match them - if you want to switch which layer interactive features come from, or disable interactivity without disabling the tile layer, you can.
will support for interactive tiles be dropped in TileMill 2?
No, you can use TileMill 2 and see how it supports interactivity. We aren't going to remove or phase this out, though vector tiles will have new methods of interaction.
For your second example, you would want something like:
var map = L.mapbox.map("map", "username.id2", {});
var gridLayer = L.mapbox.gridLayer("username.id1").addTo(map);
var gridControl = L.mapbox.gridControl(gridLayer).addTo(map);
map
.addLayer(L.mapbox.tileLayer("username.id1"), true)
.setView(L.latLng(61, -160.5), 4)
.setMaxBounds(L.latLngBounds(L.latLng(50,-180), L.latLng(72,-129)));
Is there any way to create custom dynamic icons for the markers?
What I want to create is a list of points and put a number "n" within markers specifying it's the n-th element.
Yes. You can either use custom icons with Numeric Markers or the built-in numbering system on Google has for markers.
Assuming the last option (not using custom markers), your marker definition code would look like:
var NUMBER_SHOWN='34';
var ICON_COLOR = 'ff6600';
var ICON_TEXT_COLOR = '000000';
var marker = new google.maps.Marker({
position: [LatLong Obj],
map: [Map Obj],
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+NUMBER_SHOWN+'|'+ICON_COLOR+'|'+ICON_TEXT_COLOR
});
I believe this only works for two-digit number, though I'm not sure.
EDIT
Geocodezip has correctly pointed out that the second approach has now been deprecated, so it looks like you're stuck using the first approach (using google's custom numbered-icons). Have a look at Daniel Vassallo's answer here on how to use it. If none of the markers fit your needs (colors, look, etc) you can create your own custom markers for each of the numbers (if you know how, you can write a server-side script that you can pass GET vars to and have it build the icon for you using GD etc, but you can also just build all the icons by hand)
I have a leaflet.js map that has points and linestrings on it that come from an external JSON file.
If I add:
map.setView(new L.LatLng(0,0), 10);
It will centre the map on the latitude and longitude 0,0. How can I set it so the map centre and zoom fit all of the points from the JSON on it?
You could add all of your layers to a FeatureGroup which has a getBounds method. So you should be able to just say myMap.fitBounds(myFeatureGroup.getBounds());
The getBounds method for L.FeatureGroup is only available in the master branch (not the latest version, 0.3.1), for now at least.
Similar case with me. I drawn all the markers from GeoJson data. So I written the function, which gets called repeatedly on button click. Just try if it suits your requirements.
function bestFitZoom()
{
// declaring the group variable
var group = new L.featureGroup;
// map._layers gives all the layers of the map including main container
// so looping in all those layers filtering those having feature
$.each(map._layers, function(ml){
// here we can be more specific to feature for point, line etc.
if(map._layers[].feature)
{
group.addLayer(this)
}
})
map.fitBounds(group.getBounds());
}
The best use of writing this function is that even state of map/markers changed, it will get latest/current state of markers/layers. Whenever this method gets called all the layers will be visible to modest zoom level.
I needed to do this when showing a user directions from his origin to a destination. I store my list of directions in an array of L.LatLng called directionLatLngs then you can simply call
map.fitBounds(directionLatLngs);
This works because map.fitBounds takes a L.LatLngBounds object which is just an array of L.LatLng
http://leafletjs.com/reference.html#latlngbounds