I know that I can add OpenStreetMap or Google Maps as basemaps in a web page. However, I am looking for a basemap that enhances the oceans. Is it possible to add an Esri ocean basemap to my html and javascript code? If so, where could I find the code?
EDIT: I have worked up some code. The map doesn't show up when I open it. What is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 1330px; height: 630px"></div>
<script>
var map = L.map('map').setView([54.296500, -2.209221], 5);
L.esri.basemapLayer('Oceans').addTo(map);
var popup = L.popup();
</script>
</body>
</html>
You would do it very similarly to your (HTML + JS) map that would have used OSM or Google Maps.
The idea is to use Leaflet mapping library, then load the correct tile source (ESRI Oceans in your case).
You can follow the example directly on ESRI-Leaflet plugin: http://esri.github.io/esri-leaflet/examples/showing-a-basemap.html
The list of available ESRI basemaps is there: http://esri.github.io/esri-leaflet/api-reference/layers/basemap-layer.html
Note that there are Terms of Use for using ESRI basemaps: https://github.com//Esri/esri-leaflet/wiki/FAQ#what-are-the-terms-of-use-for-esri-map-tiles
Related
I have a heck of a time getting plugins to load in leaflet. Not sure what I'm doing wrong. The files are on my local machine and are included in the html file but I still receive these two errors.
Loading failed for the with source
“.../Plugins/cluster/leaflet.markercluster-src.js”.
TypeError: L.markerClusterGroup is not a function index.js:15:17
Im assuming the type error is from the plugin not loading...
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Template</title>
<meta charset="utf-8" />
<!--LOADS leaflet.js FROM CDN-->
<script
src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>
<!--LOADS leaflet.css FROM CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!--LOADS style_blank.css FOR LEAFLET-->
<link href="style_blank.css" type="text/css" rel="stylesheet">
<!--LOADS jquery-3.4.1.js FROM CDN-->
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<!--LOADS markercluster css-->
<link href="Plugins/cluster/MarkerCluster.css" type="text/css" rel="stylesheet">
<link href="Plugins/cluster/MarkerCluster.Default.css" type="text/css" rel="stylesheet">
<!--LOADS markercluster plugin-->
<script src="Plugins/cluster/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map"></div>
<!--CONTAINS GEOJSON DATA-->
<script src="Data/activeShops.js"></script>
<!--LOADS LEAFLET MAP DATA/CUSTIMIZATION-->
<script src="index.js"></script>
</body>
</html>
Javascript:
// starting location
var map = L.map('map',{
center: [41.05, -77.5],
zoom: 8,
minZoom: 2,
maxZoom: 18,
});
// tile layer
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: ""
}).addTo(map);
// markercluster plugin
var markers = L.markerClusterGroup();
var activeShops = L.geoJSON(activeShops);
markers.addLayer(activeShops);
map.addLayer(markers);
Are there any problems with my HTML or Javascript file that would prevent this plugin from loading? I have both .css files and javascript src file indluded in HTML as per the directions on github. Thank you.
I have the same problem..
the reason is that you load the leafletjs files from the leatflet repo, and this sends Content-Type: text/html for this files.
And this server sends a X-Content-Type-Options: nosniff header too.
The result is that your browser discovers that you try to load JavaScript and Css, but the content-type of the files behind the Url is not matching what makes your browser blocking this files from loading.
#see Mozilla developer docs - X-Content-Type-Options
The problem is, you must be on the server side of the loaded files to change the output headers.
The only "hack" to handle this behavoir I found in the question css-file-blocked-mime-type-mismatch-x-content-type-options-nosniff
But removing the rel attribute is a very dirty trick and there is no garanty that this will work in the future.
The only "clean" solution would be to download leaflet.js and leaflet.css and host them on your own webspace.
Plugins/cluster/leaflet.markercluster-src.js
Is this file exist in your project?
How can I integrate zurb motion-ui in a simple html, css javascript project. I would wish to use the animations but from the documentation there is no clear directions on how to include it in a simple project
If you are not familiar with SASS, NPM/Bower you can download Motion UI Starter Kit from official page http://zurb.com/playground/motion-ui which is really easy to understand.
Super easy example could looks like this one:
Include CSS motion-ui.min.css
Include JS motion-ui.min.js
Write some simple javascript for onclick animation
What does it do?
When you click on the link (.js-button) image (.js-image) will do rotating animation (spin-in)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="motion-ui.min.css" />
<title>Motion UI Super Simple Example</title>
</head>
<body>
Click to animate!
<br /><br />
<img src="http://satyr.io/200" class="js-image" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="motion-ui.min.js"></script>
<script>
var element = $('.js-image');
var button = $('.js-button');
button.click(function() {
MotionUI.animateIn(element, 'spin-in');
});
</script>
</body>
</html>
I'm having trouble figuring out how to use the gmaps plugin. I've followed the example given and even looked at the page source and copied it, yet I still have no progress.
This is my chunk of html with js files included.
<!DOCTYPE html>
<html>
<head>
<title>testss</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/javascripts/maps.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link href='//fonts.googleapis.com/css?family=Convergence|Bitter|Droid+Sans|Ubuntu+Mono' rel='stylesheet' type='text/css' />
<script>
$(document).ready(function(){
var map = new GMaps({
div: '#map', lat: -12, lng: -77
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I'm getting these errors:
Uncaught Google Maps API is required. Please register the following JavaScript library
http://maps.google.com/maps/api/js?sensor=true. maps.js:22
Uncaught ReferenceError: GMaps is not defined
Not sure why this issue is appearing since I've included the file. Any ideas are much appreciated!
If this helps, I'm using node.js and express on localhost.
That's a dependency error. Include http://maps.google.com/maps/api/js before your call to /javascript/gmaps.js
The error is in the registration url of google maps api. Please use https instead of http.
Include this url:
https://maps.google.com/maps/api/js?sensor=true
I'm not sure, who was using the wrong documentation your or I, but this seems to be working quite fine:
<!DOCTYPE html>
<html>
<head>
<title>testss</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/javascripts/maps.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link href='//fonts.googleapis.com/css?family=Convergence|Bitter|Droid+Sans|Ubuntu+Mono' rel='stylesheet' type='text/css' />
<script>
$(document).ready(function(){
var map = new google.maps.Map(
document.getElementById('map'),
{
zoom: 15,
center: new google.maps.LatLng(-12, -77)
}
);
});
</script>
</head>
<body>
<div id="map" style="height: 20em;"></div>
</body>
</html>
edit: I just realized you were trying to use gmaps.js - but in that case you're missing the gmaps.js file unless that is what your maps.js was for.
You can download the current version at: https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js
I have this page that uses Google Maps Javascript API (extPage.php):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var cord = new google.maps.LatLng(28.545078,-81.377196);
var mapOptions = {
zoom: 15,
center: cord,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"style="width:600px; height:500px"></div>
</body>
</html>
That page loads fine as is but I am trying to load into a div on another page. I am doing it like this (test.php):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#LoadBut").click(function() {
$("#extDiv").load('extPage.php');
});
});
</script>
</head>
<body>
<input type="button" id="LoadBut" value="Load">
<div id="extDiv"></div>
</body>
</html>
When I run it just like this I get an error ReferenceError: google is not defined. I've tried moving the <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> to the test.php page. The error message goes away but the map does not load.
I've never been to sure about the best way to handle Javascript on a page inside of a div like this.
Any help with this would be great.
Thanks!
From what I understand of your requirements, you can use the
Google Static Maps API, whcih does not require any JavaScript.
You just place an img tag with a reference to a static map url into your page with the appropriate parameters. For your example:
<div id="extDiv">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=28.545078,-81.377196&zoom=15&size=600x500&maptype=roadmap&sensor=false" />
</div>
See the note at the top of the documentation to see if the inclusion of API keys are applicable to your project.
I've been trying to use this really cool JVector Interactive map plugin with my Rails 3 app but I must be doing something wrong because the map is not rendering. I haven't used JQuery much with Rails so am kind of new at this. I created a controller called Maps and a view called Intro.html.erb, which included my html from this tutorial: http://developer.practicalecommerce.com/articles/2988-Create-an-Interactive-Map-with-jVectorMap
I also split up my .js functions by putting them in application.js. Since that didn't work I found some other code that I tried to put in my Intro.html.erb file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="public/javascripts/jquery.vector-map.css" type="text/css" media="screen" />
<script src="public/javascripts/jquery.min.js"></script>
<script src="public/javascripts/jquery.vector-map.js"></script>
<script src="public/javascripts/world-en.js"></script>
<script>
$(function(){
$('#map').vectorMap();
});
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>
It's still not rendering. I'm trying to run this in my development environment and am pointing locally to the files. For example: public/javascripts/world-en.js"
Any help would be greatly appreciated.
You want to use "world map" but in your finction you are defining the"#map". Here is the correct code you may try:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="scripts/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
<script src="scripts/jquery-1.8.2.js"></script>
<script src="scripts/jquery-jvectormap-1.2.2.min.js"></script>
<script src="scripts/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
$(function(){
$('#world-map').vectorMap();
});
</script>
</body>
</html>
Here is the folder with docs you need. Download and unzip the following folder to you htdocs on your local host
Same problem, fixed by specifing the imported map into the js initialization
$('#world-map').vectorMap(
{
map: 'world-en',
}