d3.geomap is undefined in Grails application - javascript

I am using d3.geomap in Grails to create a map of the US.
As said in https://d3-geomap.github.io/ my gsp look like:
<html>
<head>
<meta name="layout" content="main" charset="utf-8">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'd3.geomap.css')}" type="text/css">
<g:javascript src="d3.geomap.dependencies.min.js" />
<g:javascript src="d3.geomap.min.js" />
</head>
<body>
<script>
var map = d3.geomap.choropleth()
.geofile('/topojson/countries/USA.json')
.projection(d3.geo.albersUsa)
.column('2012')
.unitId('fips')
.scale(1000)
.legend(true);
d3.csv("mapusa", function(error, data) {
d3.select('#map')
.datum(data)
.call(map.draw, map);
});
</script>
<div id="map"></div>
</body>
</html>
The css file d3.geomap.css is under web-app/css.
The js files d3.geomap.dependencies.min.js and d3.geomap.min.js are under web-app/js.
Under grails-app/views/ I have the topojson folder.
When I run the page it gives me:
Uncaught TypeError: Cannot read property 'choropleth' of undefined
d3.geomap is undefined.
Any ideas?
Thanks in advance.

In my main.gsp I have:
<script src="http://d3js.org/d3.v3.min.js"></script>
When I remove this, then d3.geomap has value and show the US map. I am not sure why they enter in conflict.

Try this code below, you will get your desired output of world map. Similarly, you can do it for US maps.
<head>
<meta charset="utf-8">
<link href="https://d3-geomap.github.io//d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="https://d3-geomap.github.io//d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="https://d3-geomap.github.io//d3-geomap/js/d3.geomap.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = d3.geomap().geofile('https://d3-geomap.github.io//d3-geomap/topojson/world/countries.json');
d3.select('#map')
.call(map.draw, map);
</script>

Related

How to have a popup read and display information from a GeoJson file (LEAFLET)

I am trying to make an interactive map of trails my company owns for my companies website.
I have markers displayed on all the trailheads and I want them to display a popup of certain information located inside of a GeoJson file.
Here is my HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Map</title>
<!-- leaflet -->
<link rel="stylesheet" href="lib/leaflet/leaflet.css" />
<script src="lib/leaflet/leaflet.js"></script>
<!--Mapbox -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
<script src="data/trailheads.js"></script>
<style type="text/css">
#map {
height: 400px;
}
</style>
</head>
<body>
<h1> Map </h1>
<div id="map"></div>
<script>
var map = L.map('map').setView([43.8476, 18.3564], 13);
var trailheadsLayer = L.geoJson(trailheads)
.bindPopup()
.addTo(map);
map.fitBounds(trailheadsLayer.getBounds());
L.tileLayer('https://api.mapbox.com/styles/v1/spatrick467/cj3yh6guz21os2so16xhs4son/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3BhdHJpY2s0NjciLCJhIjoiTVNaNG1OWSJ9.gq6641R9QJG5jWyO5tKIJw', {
foo: 'bar'
}).addTo(map);
</script>
</body>
</html>
The GeoJson file is quite large so I will attach it into a mediafire download (along with the HTML, just incase you need it)
Index.html
Trailheads GeoJson file
Assuming that trailheads.js is a valid jsonp file, you should specify for each feature what information you will display. If you look at the leaflet docs, there's an option: 'onEachFeature' which you can use.
var trailheadsLayer = L.geoJson(trailheads, {
onEachFeature: function(layer, feature) {
feature.bindPopup('popup content');
}
});
You can change 'popup content' for a property of your geoJSON, e.g. 'feature.properties.name'.

Jquery countdownTimer Plugin not working

I downloaded this jquery plugin: http://harshen.github.io/jquery-countdownTimer/
specifically to use the Reverse countdown to zero from time set to only minutes timer.
I am pretty sure I followed the instructions correctly but the plugin does not work. I have never used jQuery or plugins before, so I'm not sure if I am missing something or just doing something completely wrong (or both).
My Javascript test alert does run.
I will attach my code for you all to look at. Not sure if it has to do with my file paths, but I've attached an image of that as well. Please tell me what could be causing the problem and how to fix. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
And here is a picture of my project folder, containing the files:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>

d3 - geomaps hover option

I am creating a geographical map of USA using d3 geomaps.
I want a state to be highlighted when I hover over the state. Is that possible?
Here's my current code:
<html>
<head>
<meta charset="utf-8">
<link href="d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="d3-geomap/js/d3.geomap.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
var map = d3.geomap.choropleth()
.geofile('d3-geomap/topojson/countries/USA.json')
.projection(d3.geo.albersUsa)
.column('2012')
.unitId('fips')
.scale(1000)
.legend(true);
d3.csv('data.csv', function(error, data) {
d3.select('#map')
.datum(data)
.call(map.draw, map);
});
</script>
Yes you can, check out this JSFiddle I've made : http://jsfiddle.net/b6huwcd7/1/
All i've done is adding this CSS code to the example code :
path.unit:hover{
fill:red;
}
based on #black0ut 's response, here's the answer:
<html>
<head>
<meta charset="utf-8">
<link href="d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="d3-geomap/js/d3.geomap.min.js"></script>
</head>
<style>
path.unit:hover{
fill:red;
}
</style>
<body>
<div id="map"></div>
</body>
</html>
<script>
var map = d3.geomap.choropleth()
.geofile('d3-geomap/topojson/countries/USA.json')
.projection(d3.geo.albersUsa)
.column('2012')
.unitId('fips')
.scale(1000)
.legend(true);
d3.csv('data.csv', function(error, data) {
d3.select('#map')
.datum(data)
.call(map.draw, map);
});
</script>

gmaps.js Api doesn't work

I want to add a googlemap to my html page using gmaps.js api. I put the gmaps.js file to same folder with my html page but when i try to load my html page nothing happens below is my code
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TaxiPolis|#Web-taxi</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" scr="gmaps.js"></script>
<link rel="stylesheet" type="text/css" href="web_taxi_css.css"/>
<script type="text/javascript" src="web_taxi_java.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
body{
width:100%;
height:100;
}
#map_canvas{
width:100%;
height:100%;
}
javascript:
$(document).ready(function() {
var map = new GMaps({
div: '#map_canvas',
lat: -12.043333,
lng: -77.028333
});
});
So when I test it on Google Chrome and IE I get the Error:
Uncaught ReferenceError: GMaps is not defined
Any ideas why this happening?
Thanks in Advance.
Your html has a typo:
Change
<script type="text/javascript" scr="gmaps.js"></script>
to
<script type="text/javascript" src="gmaps.js"></script>
The GMaps object does not exist. You have to use an object of the type google.maps.Map to load a map on your page.
This should be your javascript code:
$(document).ready(function() {
new google.maps.Map(document.getElementById('map_canvas'), {center: {lat:-12.04333, lng:-77.02833}});
});
A basic example can be found here.

Adding a bingmap on a html webpage javascript error

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
function GetMap()
{
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials: "Your Bing Maps Key",
center: new Microsoft.Maps.Location(45.5, -122.5),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7});
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
I've tried even loading a simlple map but I get a js error on the Microsoft class undefined
Add the following line to the <head> section of your page, before the section that you've pasted above:
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"
charset="UTF-8"></script>
Have you included the include for the maps api?
<script type="text/javascript" src="bingmaps.js"></script>
Or are you using the rest service, in which case you need to specify the location of the service in an AJAX call...
http://www.earthware.co.uk/blog/index.php/2010/10/using-jquery-with-the-bing-maps-rest-api/

Categories