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.
Related
I need a direction, 'cause I don't know how to look for it, or basically how to do that.
Every time a user presses a locate button it will locate his position (already done this part)
And then, I want to give certain details about his city (in my case, I want to give corona details of people amount that are infected in the city area)
for example: so lets say the user lives in new york, and then he clicks on locate position, it gives him the amount of sick people in his area.
i used this website for my code:
https://developers.arcgis.com/javascript/3/jssamples/widget_locate.html
my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>OpenStreetMap</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<style>
html, body, #esri-map-container {
padding: 0px;
margin: 0px;
height: 100%;
width: 800px;
height: 500px;
}
#LocateButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.35/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/LocateButton",
"dojo/domReady!"
], function(Map, LocateButton)
{
map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="LocateButton"></div>
</body>
</html>
So yeah, I don't know where to search really, if you can direct me or help me out figuring how am I supposed to do that.
You can get some information data about the location detected by using the 'locate' event.
In there you will find the coordinates of the location and much more. I personally tried to convert coordinates to address but there is not much ArcGIS support right now. If you find a way through Google's API maybe you will be able to finally get the city through the coordinates ArcGIS gives you.
geoLocate.on('locate', (data) => {
console.log(data);
});
You will find a working example of the event I mentioned above here.
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>
Using the Google Maps API on a web page, I'm able to use the keyboard's up/down and right/left arrow keys to pan the map. I want to allow the user to drag/pan the map via the mouse as normal, but want to disable panning from the keyboard arrow presses that is occurring after the map is clicked. How can I do this?
For background, I'm using the arrow keys on the web page for other functionality (to move up and down an HTML list), and don't want the map to move around when the user presses arrow keys.
You can set the keyboardShortcuts option in MapOptions to false to disable keyboard actions on the map
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: {lat: -34.397, lng: 150.644},
keyboardShortcuts: false,
gestureHandling: "greedy",
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_KEY"
async defer></script>
</body>
</html>
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.
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>