Hover tooltip on shapefile in Mapbox/TileMill - javascript

I'm creating a map in TileMill which shows the age of various buildings by color. I have 4 data layers (each with 50 years of building construction, so it can be toggled on/off) and a base layer.
Within TileMill I can see tooltips when I hover over the shapefiles. I've customized them so it shows the age of construction of the building the cursor is hovering over. However when I export to MBTiles to upload to MapBox for integration on my website, the hover functionality is gone, and there is no legend.
I have searched for hours for help on MapBox's website and API. I am not using Markers so I cannot use that as a solution (there are over 800,000 buildings). Is there any way to do this?
var map = L.mapbox.map('map', 'jacobs74.xoonovka', {
legendControl: {
// any of the valid control positions:
// http://leafletjs.com/reference.html#control-positions
position: 'bottomleft'
}, zoomControl: false
})
.setView([41.8928, -87.6491], 14),
markerLayer = L.mapbox.markerLayer().addTo(map);
map.gridControl.options.follow = true;
new L.Control.Zoom({ position: 'topright' }).addTo(map);
var gridLayer = L.mapbox.gridLayer('jacobs74.xoonovka');
map.addLayer(gridLayer);
map.addControl(L.mapbox.gridControl(gridLayer, {follow: true}));
L.control.layers({
}, {
'Thru 1899': L.mapbox.tileLayer('jacobs74.s37bpdgq'),
'1900-1949': L.mapbox.tileLayer('jacobs74.fi084ush'),
'1950-1999': L.mapbox.tileLayer('jacobs74.yh8prbfi'),
'2000-Now': L.mapbox.tileLayer('jacobs74.awsw2ji1')
}).addTo(map);

It's a bit unclear where your issue is. Please include a copy of your code. As for creating a tooltip for tile as well as marker layers. Just set the follow option to true map.gridControl
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Movetip</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'examples.map-8ced9urs');
map.gridControl.options.follow = true;
</script>
</body>
</html>

Related

Why is the basic example of the ArcGIS JavaScript API throwing an error?

I'm trying to use the ArcGIS JavaScript API to build some interactive web maps. However, using the code found on the official documentation throws an error every time. I have a working API key, ommitted in the example below, of course.
Is there something I'm missing?
Error:
Exception has occurred.
Object
Code:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS API for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
esriConfig.apiKey = "YOUR_KEY_HERE";
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
const view = new MapView({
map: map,
center: [-118.805, 34.027], // Longitude, latitude
zoom: 13, // Zoom level
container: "viewDiv" // Div element
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

Google Maps Javascript - Disable 3d view when zoomed in

Is there a way to disable google maps from going to 3d mode when zooming in?
I would like to keep it like this, just zoomed in:
here
But when I zoom in currently, it 3d renders the buildsings:
here
That is the 45-degree imagery in Satellite view. You can set tilt: 0 in the MapOptions when initializing the map to avoid the map using that imagery when zoomed in very close. Here's a simple sample JSBin
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(37.422009,-122.084302),
tilt: 0,
mapTypeId: "satellite",
zoom: 19
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"
async defer></script>
</body>
</html>

How to get new gmaps styles?

When I created a simple google map I get map like this
but in https://www.google.com.ua/maps/ map is looking like this
How to get a new design of gmaps?
I guess I need a JSON styles, but can`t find official JSON styles from map.
code
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
And here official demo (old design)
https://google-developers.appspot.com/maps/documentation/javascript/examples/full/map-simple
from jsfiddle
You can create your own custom style here https://mapstyle.withgoogle.com/ and export as a JSON file. The tool gives you the opportunity to declare styles to a granular level
Other options are https://snazzymaps.com/ or http://www.mapstylr.com/ to use any of the existing styles or create yours.

Scrolling down a page with a ArcGIS map

I'm using version 4.0 of the ArcGIS API for my maps.
whenever map is loaded, User has to scroll down to see the map. This is the first issue i am facing.
My map is somewhere in the middle of the page so the user has to scroll down to view it.
Then if a certain point was clicked on the map or if a certain area in dragged to zoom in, the pointers the map shows as selection are not the exact points the mouse is pointing at. it points to a location above the mouse pointer.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Add the Compass widget to a basic 2D map - 4.0</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Compass",
"dojo/domReady!"
],
function(
Map,
MapView,
Compass
) {
var map = new Map({
basemap: "national-geographic"
});
var view = new MapView({
container: "viewDiv",
scale: 500000,
center: [26.26, 39.17],
map: map
});
/********************************
* Create a compass widget object.
*********************************/
var compassWidget = new Compass({
view: view
});
// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");
});
</script>
</head>
<body>
<!-- add div for test-->
<div style="height:500px;"></div>
<div id="viewDiv"></div>
</body>
</html>
Note:- Same issue exist on arcgsi js api sample too...
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/sandbox.html?sample=get-started-mapview
If you run this code you'll see if you scroll down and drag an area (by holding shift and dragging the mouse) it will drag an area above your selection.
Well, I noticed this is happening whenever user scrolls.
So I suggest either remove scroll bar or reduce the size of your top header container.
For more detail please refer below running code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Add the Compass widget to a basic 2D map - 4.0</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Compass",
"dojo/domReady!"
],
function(
Map,
MapView,
Compass
) {
var map = new Map({
basemap: "national-geographic"
});
var view = new MapView({
container: "viewDiv",
scale: 500000,
center: [26.26, 39.17],
map: map
});
/********************************
* Create a compass widget object.
*********************************/
var compassWidget = new Compass({
view: view
});
// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");
});
</script>
</head>
<body>
<!-- add div for test-->
<div style="height:100px;"></div>
<div id="viewDiv"></div>
</body>
</html>
Hoping this will help you :)
I had posted this in one of the ArcGIS forums and got to know this is a bug with 4.0 and will be fixed in 4.1.

Map is not rendering in LeafletJS - getting blank page & no errors

I am trying to implement a map view that shows either online or offline tiles using the LeafletJS library for Europe (Zoom level 6 & 7).
I've generated the offline map tiles using a program called Mobile Atlas Creator 2.0.0 beta 1 using these settings:
When the atlas is generated, it creates a zip file containing the folder MapQuest with several sub folders and tile images.
So, I have downloaded the leaflet JS library version 0.7.7 from http://leafletjs.com/ and extracted into the following dir structure along with the offline map tiles:
Here are the contents of my index.html
<!DOCTYPE html>
<html>
<head>
<title>Europe Zoom Level 6 & 7</title>
<link rel="stylesheet" type="text/css" href="leaflet.css">
<script type="text/javascript" src="leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
(function () {
// Objects
var isOnline = true;
var map = L.map('map').setView([51.505, -0.09], 6);;
// Generate tile layer url
var tileLayerUrl = isOnline
? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
: 'MapQuest/{z}/{x}/{y}.jpg';
// Set tile layer & set to map
L.tileLayer(tileLayerUrl, {
minZoom : 6,
maxZoom : 7,
attribution: '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
})();
</script>
</body>
</html>
I tried running this in offline mode as well as online mode to no avail; I am just getting a blank page. There are no errors in console.
Any ideas what I might be doing wrong here?
Okay, I have figured it out. The issue was caused by not setting custom styles to control height.
Here's the fixed working version:
<!doctype html>
<html lang="en">
<head>
<title>Europe Zoom Level 6 & 7</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="leaflet.css">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
#map { height: 100% }
</style>
<script type="text/javascript" src="leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
(function () {
// Objects
var isOnline = false;
var map = L.map('map').setView([51.505, -0.09], 6);;
// Generate tile layer url
var tileLayerUrl = isOnline
? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
: 'MapQuest/{z}/{x}/{y}.jpg';
// Set tile layer & add to map
L.tileLayer(tileLayerUrl, {
minZoom : 6,
maxZoom : 7,
attribution: '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
})
.addTo(map);
})();
</script>
</body>
</html>

Categories

Resources