I have already done the following...
I downloaded the .svg for colorado's counties
Then opened the .svg with notepad/notepad++ etc. and pasted everything to this site that converts it into a jvectormap.
Now that I have done that I am wondering how I incorporate the counties into my map of the united states. An example of this can be found here: http://jvectormap.com/examples/drill-down/ When you click on one of the states it zooms in and displays the counties.
Currently this is what I have:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jquery-jvectormap-2.0.1.css" type="text/css" media="screen"/>
<script src="jquery.js"></script>
<script src="jquery-jvectormap-2.0.1.min.js"></script>
<script src="jquery-jvectormap-us-aea-en.js"></script>
<script src="co-counties.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script>
$(function(){
new jvm.MultiMap({
container: $('#map'),
maxLevel: 1,
main: {
map: 'us_aea_en'
},
mapUrlByCode: function(code, multiMap){
return '/js/us-counties/jquery-jvectormap-data-'+
code.toLowerCase()+'-'+
multiMap.defaultProjection+'-en.js';
}
});
});
</script>
</body>
</html>
It zooms in on a state when you click it but now I need it to transition into the county view.
Also, my Colorado counties jvectormap is currently named 'co-counties.js'
Any help at all would be greatly appreciated!
thanks!
I fixed this problem for all states by downloading the full project for jvectormap - http://jvectormap.com/download/
and under /tests/assets/us the author includes all the js files needed. Just copy them over to your project and use:
new jvm.MultiMap({
container: $('.jvectormap-container'),
maxLevel: 1,
main: {
map: 'us_lcc_en'
},
mapUrlByCode: function(code, multiMap){
return '../js/counties/jquery-jvectormap-data-'+
code.toLowerCase()+'-'+
multiMap.defaultProjection+'-en.js';
}
});
and it will load each of the county maps on demand
Related
HERE map doesn't load on page load, it only shows the HERE logo and copyright, but it loads with a function on clicking a button. The below code is slightly adapted from the HERE docs (https://developer.here.com/documentation/maps/3.1.30.3/dev_guide/topics/map-controls-ui.html). I want the map loaded with the page, not after clicking a button. What am I missing?
<div id="map" style="height: 400px; width: 100%;"></div>
$(function() {
let platform = new H.service.Platform({
'apikey': api_key
});
loadMap ({
lat: <?php echo round($obj->getLatitude(), 4); ?>,
lng: <?php echo round($obj->getLongitude(), 4); ?>
});
function loadMap (position) {
let defaultLayers = platform.createDefaultLayers();
let map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
zoom: 16,
center: position,
}
);
});
});
[EDIT]
I've been struggling for days trying to figure out why the map wouldn't load with the very basic code example. And I accidentally closed the browser Development console and the map appeared all of a sudden! What the?!...
So the problem is the map won't appear on page load until the window is resized. So what can I do to trigger that to make the map to appear?
It seems the code for browser is generated by PHP backend.
You need double check what is generated. It seems that map container
<div id="map" style="height: 400px; width: 100%;"></div>
is not ready in HTML DOM but the script is already started.
Please compare a result document(that generated by PHP-backend) with follow structure:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div id="map" style="height: 400px; width: 100%;"></div>
<script>
Your script here! - It should be latest element of body-element
</script>
</body>
</html>
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.
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>
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>
I am using google maps API V2 and i need to open a fancybox, from within an infowindow.
I tried this(but didnt work):
GEvent.addListener(marker1, "click", function() {
var cnt = '<div> <a id="fancybox" href="http://www.google.com/">Link</a></div>';
marker1.openInfoWindowHtml(cnt);
});
I dont understand why it does not work, because when i do the same but not as a parameter(just in a link somewhere in the page), it works:
<a id="fancybox" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
To add the fancy box plugin i use this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#fancybox").fancybox();
});
</script>
So as you see, the problem is that when calling the fancy box, from within openInfoWindowHtml(), it doesnt work.
Ill appreciate some help.
map is now on the link: http://joostudio.info/test/
As you can see, from bottom image fancybox works just fine but when I call it from map infowindow it jus doesn't work.
Here is complete page source code
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#fb").fancybox();
});
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function runmap() {
var myLatlng = new google.maps.LatLng(43.154541,19.12315);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow({});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.145086,19.090633),
});
google.maps.event.addListener(marker1, "click", function () {
infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>');
infowindow.open(map, marker1);
});
}
</script>
</head>
<body onload="runmap()">
<div id="map_canvas" style="width: 972px; height: 500px"></div>
</br>
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
</body>
</html>
How can I simply call fancybox from google maps v3 marker?
Thanks a lot
I think your problem is that the html including your link displayed in infowindow does not "exist" at the time you setup the fancybox.
I think you can solve this problem by providing a DOM node instead of string with HTML. Simply create a hidden div with your link, you want to display and it should work.
Ran into to a similar problem myself, it's very hard to get an event to stick to an element inside a Google Maps, I tried both Fancybox and Colorbox but I got the same result on both. My solution to this was to use and good old onclick directly on the element, so something like:
link
Hope this solves your issue.