Develop Reference

How to use FitBounds in deckgl on timer without npm and es6

I've a deckGL map in a div-container.
let deckMap = new deck.DeckGL({
mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
initialViewState: {..
},
layers: [geoJSONLayer],
getTooltip,
controller: true,
onViewStateChange: ({ viewState }) => {
console.log("View Change");
deckMap.setProps({ viewState })
}
});
That thing "overlays"(?) my normal mapgl map
const map = new mapboxgl.Map({
container: 'map',
interactive: false,
style: carto.basemaps.voyager,
center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
zoom: INITIAL_VIEW_STATE.zoom
});
I'm running a cyclic download of a GeoJSON file and want to display the data. that already works. I also can calculate the bounds using bounds.extend.
But I can't find a way to set the zoom/fit the bounds.
What I've tried
map.fitBounds is just not working. It does nothing
deckMap.fitBound => unknown command
WebMercatorViewport => needs an import, import is unknown, including it requires app.js to be a module which screws the whole code.
viewport=info.context with that I could set viewport.fitBounds. Problem: What is info? I found this example in an event driven approach and info is the layer that the user interacts with. But simply using my geoJSONLayer does not work; fitBounds is not existent
Calculate zoom by hand. Can't find the algorithm anymore, but it was for GoogleEarth and I think it was broken in general.
How do I get the damned fitBounds working or - alternatively calculate the zoom for deckGL? I wasted 5 hours on that today!

There is a working example of deck.gl fitBounds on map initialization here. To run:
Clone this repository;
Navigate into the repository and run npm i && npm start;
Go to http://localhost:8080/ and click the Toggle deck.gl mode button at the top. This will load a deck.gl instance and fit the map bounds to the data.
This gist helped me get things working:
https://gist.github.com/tomsoderlund/a2040d659aafe4064e4060f561aca6d1
Steps:
In case someone else will find this useful, the fit bounds process can be started with an event. In the case of the question, when a new geoJSON has been successfully fetched. This could also be triggered when a user clicks an auto-fit map to visible data button, or in the example above, on deck.gl initialization, etc...
Next, a helper function is used to calculate opposite corners of your bounds by passing an array of point type coordinates of data visible on your map:
fitBounds = (coords) => {
let latMin = 90;
let latMax = -90;
let lonMin = 180;
let lonMax = -180;
coords.forEach(function (coord) {
const RECT_LAT_INDEX = 'lat';
const RECT_LON_INDEX = 'lon';
if (coord[RECT_LAT_INDEX] < latMin) latMin = coord[RECT_LAT_INDEX];
if (coord[RECT_LAT_INDEX] > latMax) latMax = coord[RECT_LAT_INDEX];
if (coord[RECT_LON_INDEX] < lonMin) lonMin = coord[RECT_LON_INDEX];
if (coord[RECT_LON_INDEX] > lonMax) lonMax = coord[RECT_LON_INDEX];
});
const bounds = [
[lonMin, latMax],
[lonMax, latMin],
];
return bounds;
}
Create an instance of WebMercatorViewport and pass the same height and width parameters as your map;
const view = new WebMercatorViewport({ width: 800, height: 600 });
Call the fitBounds function on this WebMercatorViewport instance. The response will contain latitude, longitude and zoom attributes so I've destructured them below:
const { latitude, longitude, zoom } = view.fitBounds(bounds)
Set the latitude, longitude, zoom attriubtes on your map view state:
const INITIAL_VIEW_STATE = {
latitude,
longitude,
zoom,
maxZoom: 20,
pitch: 45,
bearing: 0,
};
The map can then be rendered with something like:
return (
<DeckGL
layers={layers}
initialViewState={INITIAL_VIEW_STATE}
controller={true}
>
<div style={COPYRIGHT_LICENSE_STYLE}>
{"© "}
<a
style={LINK_STYLE}
href="http://www.openstreetmap.org/copyright"
target="blank"
>
OpenStreetMap contributors
</a>
</div>
</DeckGL>
);
Padding can be added like below so that it fits nicely onto your map, something like:
const { latitude, longitude, zoom } = new WebMercatorViewport({ width: 800, height: 600 }).fitBounds(bounds, { padding: { top: 100, bottom: 100, left: 100, right: 100 } })

Leaflet popups for specific base maps

so I'm making a website using leaflet with dozens of base maps. I want to incorporate information about each map that is only visible if the user wants it. To do this, I would like to make an overlay map with popups, but I want the popups to change depending on the base map selected by the user.
How would I go about doing this?
Thank You So Much

You need to either use a plugin that keeps track of the base maps for you (like active layers) or you need to do it yourself.
If you are using the Leaflet layers control, you can subscribe to the basemapchange event to do this easily.
You need two things: active base layer management (easy) and dynamic popups (not too hard)
To wit:
First, here is the event handler to track active base layer when it changes.
map.on("baselayerchange",
function(e) {
// e.name has the layer name
// e.layer has the layer reference
map.activeBaseLayer = e.layer;
console.log("base map changed to " + e.name);
});
Because using L.marker().bindPopup() creates the popup content right there and does not support callbacks, you must manually create the popups in response to click event by calling map.openPopup() with your dynamic html (dynamic because it uses a variable: the active basemap name)
marker.on("click", function(e) {
var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>";
map.openPopup(html,
e.latlng, {
offset: L.point(1, -24)
});
});
Here is a working example on JS fiddle: http://jsfiddle.net/4caaznsc/
Working code snippet also below (relies on Leaflet CDN):
// Create the map
var map = L.map('map').setView([39.5, -0.5], 5);
// Set up the OSM layer
var baseLayer1 = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
name: "Base layer 1"
});
var baseLayer2 = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
name: "Base layer 2"
});
// add some markers
function createMarker(lat, lng) {
var marker = L.marker([lat, lng]);
marker.on("click", function(e) {
var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>";
map.openPopup(html,
e.latlng, {
offset: L.point(1, -24)
});
});
return marker;
}
var markers = [createMarker(36.9, -2.45), createMarker(36.9, -2.659), createMarker(36.83711, -2.464459)];
// create group to hold markers, it will be added as an overlay
var overlay = L.featureGroup(markers);
// show overlay by default
overlay.addTo(map);
// show features
map.fitBounds(overlay.getBounds(), {
maxZoom: 11
});
// make up our own property for activeBaseLayer, we will keep track of this when it changes
map.activeBaseLayer = baseLayer1;
baseLayer1.addTo(map);
// create basemaps and overlays collections for the layers control
var baseMaps = {};
baseMaps[baseLayer1.options.name] = baseLayer1;
baseMaps[baseLayer2.options.name] = baseLayer2;
var overlays = {
"Overlay": overlay
};
// create layers control
var layersControl = L.control.layers(baseMaps, overlays).addTo(map);
// update active base layer when changed
map.on("baselayerchange",
function(e) {
// e.name has the name, but it may be handy to have layer reference
map.activeBaseLayer = e.layer;
map.closePopup(); // any open popups will no longer be correct; take easy way out and hide 'em
});
#map {
height: 400px;
}
<script src="https://npmcdn.com/leaflet#0.7.7/dist/leaflet.js"></script>
<link href="https://npmcdn.com/leaflet#0.7.7/dist/leaflet.css" rel="stylesheet"/>
<div id="map"></div>

OpenLayers WMS layer doesn't load

I use the following block of JavaScript to try to show a WMS layer. I'm using OpenLayers 2.8.
The map's base layer (Openstreetmap) shows correctly, it zooms to the correct area, the "pyramid" layer is shown in the layer switcher, but no request to its WMS service is ever made (so the fact that the URL, styles and params are dummies shouldn't matter -- it never even attempts to get them).
OpenLayers does try to get a WMS layer once I pan or zoom far enough so that the Gulf of Guinea is in view (but all my data is in the Netherlands). This suggests a projection problem (WGS84's (0, 0) point is there), but I don't understand why OpenLayers doesn't even try to fetch a map layer elsewhere. My data is in EPSG:3857 (Web Mercator) projection.
/*global $, OpenLayers */
(function () {
"use strict";
$(function () {
$(".map").each(function () {
var div = $(this);
var data_bounds = div.attr("data-bounds");
console.log("data_bounds: " + data_bounds);
if (data_bounds !== "") {
var map = new OpenLayers.Map(div.attr("id"), {
projection: "EPSG:3857"});
var extent = JSON.parse(data_bounds);
var bounds = new OpenLayers.Bounds(
extent.minx, extent.miny,
extent.maxx, extent.maxy);
map.addLayer(
new OpenLayers.Layer.OSM(
"OpenStreetMap NL",
"http://tile.openstreetmap.nl/tiles/${z}/${x}/${y}.png",
{buffer: 0}));
map.addLayer(
new OpenLayers.Layer.WMS(
"pyramid", "http://rasterserver.local:5000/wms", {
layers: "test",
styles: "test"
}, {
singleTile: true,
isBaseLayer: false,
displayInLayerSwitcher: true,
units: 'm'
}));
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToExtent(bounds);
}
});
});
})();
Edit: the 'data_bounds' console print prints (with some added formatting):
data_bounds: {
"minx": 582918.5701295201,
"miny": 6923595.841021758,
"maxx": 821926.9006116659,
"maxy": 7079960.166533174
}
It zooms to the correct region in the north of the Netherlands, so I don't think the problem is there.
Since posting, I found out that if I don't use the OSM layer, and instead use the WMS layer as baselayer, it works. So perhaps there's some incompatibility with a OSM baselayer and a WMS layer added to it? But then I don't get that it does seem to do something near WGS84 (0, 0).

I eventually managed to fix this by giving the map an explicit maxExtent:
var extent = JSON.parse(data_bounds);
var bounds = new OpenLayers.Bounds(
extent.minx, extent.miny,
extent.maxx, extent.maxy);
var map = new OpenLayers.Map(div.attr("id"), {
projection: "EPSG:3857",
maxExtent: bounds
});
Oddly enough this doesn't limit the user's ability to pan and zoom around the world, but it does make the overlay work...

Dynamic rectangles in Google Maps

First I'm pretty new to Javascript, so sorry if my question comes across poorly.
I'm creating an application in Flash to help users calculate their electrical costs. Then I'm taking this figure and write it to an xml file.
Now I'm looking to open a webpage and show a google map, and there is a rectangle drawn over the map which is generated dynamically from the number generated earlier and stored in the xml file.
I'm completely lost as to places to turn on how to achieve this. I've gotten my map on to my page, and it scales 100% as I want it to, but I can't figure out the dynamic rectangle part at all. Any ideas or pointers in the right direction greatly appreciated.

In this latest version, the XML file
<countries>
<country name="USA" lat="40.0" lng="-100.0" width="30.0"/>
<country name="France" lat="46.6" lng="2.7" width="10"/>
<country name="Germany" lat="51.1" lng="10.1" width="20"/>
</countries>
is loaded as soon as the map tiles finish loading. I could not get the getProjection to be called correctly if I did not wait for tile loading to finish. The docs state that getting the projection needs the map to be initialized, and recommends listening for projection_changed. Both ways work yet I still feel listening to tiles_loaded is safer and if something goes wrong with the xml loading it will get called again if the map is zoomed or panned a noticeable amount.
var map;
var xmlLoaded = false;
function initialize() {
var mapOptions = { center: new google.maps.LatLng(30.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'tilesloaded', loadData);
}
function loadData() {
if(!xmlLoaded) {
$.ajax({
type: "GET",
url: "co2data.xml",
dataType: "xml",
success: function(xml) {
var countries = xml.documentElement.getElementsByTagName("country");
for(var i = 0, country; country = countries[i]; i++) {
var name = country.getAttribute("name");
var lat = parseFloat(country.getAttribute("lat"));
var lng = parseFloat(country.getAttribute("lng"));
var point = map.getProjection().fromLatLngToPoint(new google.maps.LatLng(lat,lng));
// width is really an arbitrary unit, relative to CO2 tonnage.
// equals the side of the drawn square.
// it is measured in google maps points units.
var width = parseFloat(country.getAttribute("width"));
makeCO2Rect(name, point, width);
}
xmlLoaded = true;
}
});
}
}
The rectangle is defined by width in points (the whole world is 256x256 points), so some conversion is needed when assigning their centers to the more conventional LatLng.
function rectParamsToBounds(point, width) {
var ctrX = point.x;
var ctrY = point.y;
var swX = ctrX - (width/2);
var swY = ctrY - (width/2);
var neX = ctrX + (width/2);
var neY = ctrY + (width/2);
return new google.maps.LatLngBounds(
map.getProjection().fromPointToLatLng(new google.maps.Point(swX, swY)),
map.getProjection().fromPointToLatLng(new google.maps.Point(neX, neY)));
}
Finally, a rectangle is created with a country name that goes into a MarkerWithLabel (using v1.1.5 here, you can hotlink to http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js though I prefer saving a local copy)
Since dragging a rectangle appears impossible, a marker in its center works as a handle. When it's dragged, the associated rectangle moves with it.
function makeCO2Rect(name, point, width) {
var rect = new google.maps.Rectangle({
map: map,
bounds: rectParamsToBounds(point, width)
});
var marker = new MarkerWithLabel({
map: map,
position: map.getProjection().fromPointToLatLng(new google.maps.Point(point.x, point.y)),
draggable: true,
raiseOnDrag: false,
labelContent: name,
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1.0}
});
google.maps.event.addListener(marker, 'drag', function(event) {
var newLatLng = event.latLng;
var newPoint = map.getProjection().fromLatLngToPoint(newLatLng);
rect.setBounds(rectParamsToBounds(newPoint, width));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Styling the labels need to be done both in the .labels CSS class and the constructor, and rectangles have options like stroke color, thickness, opacity, and fill color.

If you just want to place a rectangular shape on the map, you can create a google.maps.Rectangleapi-doc. If you want to create a rectangular label on the map, you may be more interested in the InfoBox Utility Librarywiki-page.

Issues with dynamic google maps integration

I have ran into a very strange issue with Google Maps in Chrome 5.0.375.99:
if you dynamically create more than one Maps instance, the second and on have a strange bug where it does not display properly, is only shows in a fraction of the map space.
Some Example Pages:
one default - When you click addOne, the new object has the problem.
none default - When you click addOne the second time, the new object has the problem.
two default - Both of the initial maps display properly, but when you click addOne, the new object has the problem.
The really wierd part, is that re-sizing the window will force any improperly displaying maps to display properly to fix themselves. This leads me to believe that what is fixing it is the redraw event

Crescent Fresh is correct, in that the dimension of the div needs to be set before initialising a new map on a div.
To set the width height before creating the map div you could try the following:
return this.each(function(){
var jT = $(this),
center = new mAPI.LatLng(options.lat, options.long),
geocoder = new mAPI.Geocoder();
jT.css({
'width': hw[0],
'height': hw[1],
'margin-left': 'auto',
'margin-right': 'auto'
});
jT.data('map', new mAPI.Map(this, $.extend(options, { center: center })));
geocoder.geocode({ address: address }, function(results, status) {
if (status === mAPI.GeocoderStatus.OK && results.length) {
if (status !== mAPI.GeocoderStatus.ZERO_RESULTS) {
jT.data('map').setCenter(results[0].geometry.location);
var dump = new mAPI.Marker({
position: results[0].geometry.location,
map: jT.data('map')
});
return dump;
}
}
});
});
the above 'should' work, havent tested it tho