D3 fisheye.js plugin on Leaflet map - javascript

I've created a simple div map in which I put a map created with a leaflet.js lib as follows:
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13});
Then I tried to use the d3 fisheye plugin to implement the distortion but I don't have results. Is it possible to use this plugin on leaflet map?
I tried the following code but probably the problem is that I don't use the object with x,y,z attributes returned by the called function.
var coordinates = [0, 0];
var svg = d3.select("#map");
svg.on("mousemove", function () {
var latlng = new Array();
coordinates = d3.mouse(this);
var point = L.point(coordinate[0],coordinate[1]);
var d = map.layerPointToLatLng(point);
latlng[0] = d.lat;
latlng[1] = d.lng;
fisheye.focus(latlng);
});
Can someone help me? Thanks

Related

setView not defined with bing API

Im trying to change the mapview while using Bing maps API. I have my map initialized already but im trying to change the map view to center in on a pin who's location i have. Im merely trying to get the view to move using setView but im unsure how to move it.
function findpin() {
console.log("hello3");
var pin;
//loop through and find searched pin object
for (var i = 0; i < allPins.length; i++) {
if (searchbox.value == allPins[i].entity.title) {
pin = allPins[i];
break;
}
};
console.log(pin);
//set pin
pinSelected(pin);
//var locs = [array of Microsoft.Maps.Location];
//var rect = Microsoft.Maps.LocationRect.fromLocations(locs);
map = setView({
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center:new Microsoft.Maps.Location(0, 0),
zoom:100,
});
console.log("hello5");
}
Assuming that you initialized the map by:
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
Then you can use the setView on the instantiated map to update the view:
map.setView({
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: new Microsoft.Maps.Location(0, 0),
zoom: 20
});
Notice that the max zoom level is 20.

How to show driving distance on openlayers map?

I am using OpenLayers map in UWP desktop app.But my opelayers Map is not showing driving distance(Route) from one point to another point. i can able to show map and markers on it like location markers on map but not able to show route between source and destination.
Any help Would be appreciated.
Here is my code:
var lat = mylatitutde;
var long = mylongitutde;
var zoom = 8;
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
var fromProjection = new OpenLayers.Projection("EPSG:4326");
// Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913");
// to Spherical Mercator Projection
map = new OpenLayers.Map("Map");
map.addControl(new OpenLayers.Control.PanZoomBar());
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var position = new OpenLayers.LonLat(long, lat).transform(fromProjection, toProjection);
var marker = new OpenLayers.Marker(position);
var feature = new OpenLayers.`enter code here`Feature(markers, position);
vectorLayer.addFeatures(feature);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
map.addLayer(vectorLayer);
Is there any solution to show route between two locations in Open Layers map??
Calculating the optimal path to drive from A to B is not a task OpenLayers is designed for. It is merely there to display a map and map-related-things on it.
Of course, OpenLayers can display a route, but you somehow first have to calculate it. There are good examples on the OL website. Here is one showing a precalculated route as PolyLine, or one using IGC data.

Mapbox draw direction via two markers

How can i draw route direction from start to finish if I have coordinates of this two points?
Now my code looks like this and it just gave me 2 static markers on map
var map = L.mapbox.map('map', 'mapbox.streets', {
zoomControl: false
}).setView([start.lat, start.lng], 12);
map.attributionControl.setPosition('bottomleft');
var directions = L.mapbox.directions({
profile: 'mapbox.walking'
});
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
L.marker([start.lat, start.lng], {}).addTo(map);
L.marker([finish.lat, finish.lng], {}).addTo(map);
If I understand correctly, you wish to use Mapbox's direction and routing layer to get the walking route between the two points and display it. To do so you need to set the origin and destination points and call the query() function of direction. You also need to add a routes control to the map. The revised code is as follows.
// example origin and destination
var start = {lat: 22.3077423, lng: 114.2287582};
var finish = {lat: 22.3131334, lng: 114.2205973};
var map = L.mapbox.map('map', 'mapbox.streets', {
zoomControl: false }).setView([start.lat, start.lng], 14);
map.attributionControl.setPosition('bottomleft');
var directions = L.mapbox.directions({
profile: 'mapbox.walking'
});
// Set the origin and destination for the direction and call the routing service
directions.setOrigin(L.latLng(start.lat, start.lng));
directions.setDestination(L.latLng(finish.lat, finish.lng));
directions.query();
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions)
.addTo(map);
You may not need to add the origin / destination markers yourself, as origin / destination markers would be displayed as part of the directions control.
You'll need a polyline for that. Leaflet's (Mapbox is an extended version of Leaflet) class L.Polyline is what you need:
Reference: http://leafletjs.com/reference.html#polyline
Code:
var polyline = new L.Polyline([
[start.lat, start.lng],
[finish.lat, finish.lng]
]).addTo(map);
Example on Plunker: http://plnkr.co/edit/2XSeS1?p=preview

Leaflet OSM: Center mapview on polygon

I want generate a html file including Leaflet library to show an OpenStreetMap view with a polygon. The polygon on the map should be centered. To do so i followed this discussion, but its still unclear to me, how to center an arbitrary polygon and autozoom it. Autozoom means to me, that the polygon is completly in the visible map excerpt and fills it.
As example this would be the desired result:
This is my code so far:
var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];
function initmap() {
// set up the map
map = new L.Map('map');
/* --- Replace for different URL for OSM tiles */
var url_base ='URL_TO_MY_OPENSTREETMAPS_SERVER';
var latitude = 50.2222;
var longtitude = 3.322343;
var poly = L.polygon([
[50.2222, 3.322343],
[50.2322, 3.323353],
[...]
]);
// create the tile layer with correct attribution
var osmUrl=url_base+'{z}/{x}/{y}.png';
var osmAttrib='Map data ɠOpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 4, maxZoom: 20, attribution: osmAttrib});
// start the map at specific point
map.setView(new L.LatLng(latitude, longtitude),15);
map.addLayer(osm);
poly.addTo(map);
}
Especially it would be great, if there are "onboard" methods of Leaflet that i can use. How to calculate the center of a polygon is clear to (e.g. here) but maybe there are already implemnented methods i can use.
Solution:
// start the map at specific point
// map.setView(new L.LatLng(latitude, longtitude),15); <- Remove this line
map.addLayer(osm);
poly.addTo(map);
map.fitBounds(poly.getBounds()); // <- Add this line
Not exactly centering, but if you want the map to be fitted to the polygon:
map.fitBounds(poly.getBounds());
(doc).
To center more than one polygon is good to know that .fitBounds also accepts an array as argument, so you could do this:
const poly = [polygonA,polygonB,polygonC];
const bounds = poly.map(p=>p.getBounds());
mymap.fitBounds(bounds);

Google Map API v3 - Invalid value for property <zoom>

Using Google Maps API v3, I’m trying to do something like below to set zoom. The problem is this would give:
Error: Invalid value for property <zoom>: 10
Any help appreciated, thanks.
var mapInfo = [ [-34.397],[150.644],[10] ];
function initialize() {
var latlng = new google.maps.LatLng(mapInfo[0],mapInfo[1]);
var mapZoom = mapInfo[2];
var myOptions = {
zoom: mapZoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
Change
var mapInfo = [ [-34.397],[150.644],[10] ];
to
var mapInfo = [-34.397, 150.644, 10];
Then your code should work.
The problem was that what you had was an array of arrays. The square brackets denotes an array so you were passing a array that contained the value instead of value the value itself.
var mapZoom = mapInfo[0][2];

Categories