I'm trying to use non-geographic images stored in a WMS-service with Leaflet. These are images of old maps, that are not georeferenced yet..
I can't find the way to configure Leaflet to produce proper requests for WMS server. The problem is that BBOX values that Leaflet produces are not right. They are way too small and server responds with internal server error.
However, the server is functional and working well with proper requests.
This is the code for one map: (http://jsfiddle.net/fmL4x4fw/)
var base_url = 'http://warper.wmflabs.org';
var unwarped_image_width = 6708;
var unwarped_image_height = 6936;
var wms_url = '/maps/wms/177';
var map = L.map('map', {
crs: L.CRS.Simple
}).setView([300, 300], 10);
var southWest = map.unproject([0, 6936], map.getMaxZoom());
var northEast = map.unproject([6708, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
var mywms = L.tileLayer.wms(base_url + wms_url, {
format: 'image/png',
version: '1.1.1',
attribution: "warper",
status: 'unwarped'
});
mywms.addTo(map);
Should I write some kind of custom projection or is there some other way? I'm not very experienced with projections.
UPDATE:
This is how current implementation with Openlayers is configured:
un_bounds = new OpenLayers.Bounds(0, 0, unwarped_image_width, unwarped_image_height);
umap = new OpenLayers.Map('unmap',
{controls: [mds, new OpenLayers.Control.PanZoomBar()], maxExtent: un_bounds, maxResolution: 10.496, numZoomLevels: 8});
var unwarped_image = new OpenLayers.Layer.WMS(title,
wms_url, {format: 'image/png', status: 'unwarped'});
umap.addLayer(unwarped_image);
Related
I'm trying to move a client side method on the backend:
The client side method is using TurfJS and Leaflet to perform some operations. The only problem is that server side (nodejs) window is not available, hence I cannot use Leaflet.
I'm looking for a way to transform this piece of code in the vanilla Turf equivalent:
const pointA = turf.point([originCoords.lng, originCoords.lat]);
const pointB = turf.destination.default(pointA, 50, 45, { units: 'kilometers' });
// here I'm using leaflet to get a BBox
const latLngBounds = L.latLngBounds(
L.latLng(pointA.geometry.coordinates[1],
pointA.geometry.coordinates[0]),
L.latLng(pointB.geometry.coordinates[1], pointB.geometry.coordinates[0]),
);
// using that BBox I then create the rectangle, again with leaflet
tile = L.rectangle(latLngBounds);
I'm still newbie with this whole GeoJSON thing, and maybe I'm missing something, can someone help me?
Here is the code that uses Turf.JS only.
var turf = require('#turf/turf');
var pointA = turf.point([-75.343, 39.984]);
var pointB = turf.destination(pointA, 50, 45, { units: 'kilometers' });
//create a bbox that extends to include all the features
var bbx = turf.bbox(turf.featureCollection([pointA, pointB]));
var pgn = turf.bboxPolygon(bbx); //convert it to Polygon feature
console.log(JSON.stringify(pgn)); //output to console
The output:
{"type":"Feature","properties":{},
"geometry":{
"type":"Polygon",
"coordinates":[[
[-75.343,39.984],
[-74.92609,39.984],
[-74.92609,40.3012],
[-75.343,40.3012],
[-75.343,39.984]]]
}
}
Edit 1
Add ability to run the code:
//var turf = require('#turf/turf');
var pointA = turf.point([-75.343, 39.984]);
var pointB = turf.destination(pointA, 50, 45, { units: 'kilometers' });
//create a bbox that extends to include all the features
var bbx = turf.bbox(turf.featureCollection([pointA, pointB]));
var pgn = turf.bboxPolygon(bbx); //convert it to Polygon feature
console.log(JSON.stringify(pgn)); //output to console
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></script>
I'm try to convert polyline to rout but I have a problem
You see in the picture below that the road is different from the polyline:
Here is my code:
var mymap = L.map('map').setView([32.661343, 51.680374], 6);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mymap);
var markers = new L.MarkerClusterGroup();
var markerList = [];
var a = [];
var myTrip = [];
var myTrip2 = [];
for (var i = 1; i < locations.length ; i++) {
myTrip.push(new L.LatLng(parseFloat(locations[i]['Received']['lat']),parseFloat(locations[i]['Received']['lng'])));
a[0] = parseFloat(locations[i]['Received']['lat']);
a[1] = parseFloat(locations[i]['Received']['lng']);
var marker = new L.Marker(new L.LatLng(a[0], a[1]));
marker.bindPopup((locations[i]['Received']['id']).toString());
markerList.push(marker);
var polyline =L.polyline(myTrip, {color: 'blue'}).addTo(mymap);
}
var markerPatterns = L.polylineDecorator(myTrip, {
patterns: [
{offset: 25, repeat: 50, symbol: L.Symbol.arrowHead({pixelSize: 15, pathOptions: {fillOpacity: 1, weight: 0}})}
]
}).addTo(mymap);
var control = L.Routing.control({
waypoints: myTrip,
show: false,
waypointMode: 'snap',
showAlternatives: true,
useZoomParameter: true,
createMarker: function() {}
}).addTo(mymap);
1) So are the lines drawn using the raw coordinates? In other words, are the lines drawn like you do not use a routing service?
2) Leaflet Routing Machine is a plug-in that supports several routing engines, with OSRM as a default.
http://www.liedman.net/leaflet-routing-machine/
Have you tried inserting your DB coordinates to the OSRM-demo? Is it giving you the expected results?
http://map.project-osrm.org/
The high and low streets are routes because 1 of your waypoints are hitting that street and to get back on track again it have to turn around the block. It would have routed correcly if your waypoints where more accurate.
I'm working on a dynamic image mapper that will users can load their floor plan of apartment then put markers on parts of floor. So I wan't to change url of image layer of Leaflet map dynamically.
I'm loading map with ChangeMap function for the first time. It loads my image correctly.
function ChangeMap(_url)
{
var map = L.map('map', {
minZoom: 1,
maxZoom: 5,
center: [0, 0],
zoom: 3,
crs: L.CRS.Simple
}).setView([50.4333, 30.5167], 3);
// dimensions of the image
var w = 1526,
h = 626,
url = _url;
// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
var bounds = new L.LatLngBounds(southWest, northEast);
// add the image overlay,
// so that it covers the entire map
var overlay = L.imageOverlay(url, bounds);
overlay.addTo(map);
}
But if I try another time without refresh the page I'm getting an error "map container is alreay initialized". After that error I thought I can add div with id='map' dynamically like this.
var mapContainer = $("#mapContainer");
mapContainer.append("<div id='map' width='100%' height='400px'></div>");
I added that append function at the beginning of my ChangeMap() function. But this time there was no map on page. How can I do this ?
Only initialize the map once...So take var map = L.map('map', {... out of ChangeMap and only run it once before.I'd also recommend only initializing the L.imageOverlay once...and using setUrl to dynamically swap when needed inside ChangeMap.
I need high-res map images for my application (solar power system design). Bing Maps in OL is good for finding the right building, but too low-res for laying out solar panels. So, I want to use a small high-res static map for doing the layout. Here's what I have currently. First load the Bing Maps layer:
var layers = [];
var baseBingMapLayer = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'XXXXX',
imagerySet: 'AerialWithLabels',
})
});
layers.push(baseBingMapLayer);
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-13569845.9277,4485666.89612],
zoom: 5,
})
});
Then when I want to load the static map, the strategy is to remove the Bing Maps layer and then add the static image layer. I'm doing the following:
var extent = [0, 0, 1024, 768];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var staticURL =
"https://maps.googleapis.com/maps/api/staticmap"
+ "?center=37.7431569802915,-121.4451930197085&"
+ "zoom=20&size=1024x768&scale=2&zoom=3&"
+ "format=jpg&maptype=satellite"
+ "&key=XXX";
map.removeLayer(baseBingMapLayer);
var imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: staticURL,
imageSize: [1024,768],
projection: projection,
imageExtent: extent
})
});
var imageLayerView = new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2
});
map.addLayer(imageLayer);
map.addView(imageLayerView);
Needless to say, this isn't working. I just get a blank screen with no exceptions thrown.
I actually had some success using jQuery to just empty the entire map div and start over with a new map object. However this seems to cause other problems and didn't seem like the right approach to me.
I'm going to continue working on this problem, but thought I would post since I'm sure I won't be the last person to try this little stunt :-)
Gary
They asked me for a 'toggle button' to switch the clustering on and off Can someone help me to achieve clustering on/off?
Note: loading more than 30,000 points
Create two layers, one with and one without the marker clustering and add them to the leaflet control. For example:
var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
var cities = L.layerGroup([littleton, denver, aurora, golden]);
var citiesClustered = new L.MarkerClusterGroup();
markers.addLayer(littleton);
markers.addLayer(denver);
markers.addLayer(aurora);
markers.addLayer(golden);
var streets = L.tileLayer(mapboxUrl, {id: 'examples.map-i86knfo3', attribution: mapboxAttribution});
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [streets, cities]
});
var baseMaps = {
"Streets": streets
};
var overlayMaps = {
"Cities": cities,
"Clustered cities": citiesClustered
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
You can also create a custom control that will de-cluster the markers but this control already exists and it's easy to implement.