Skip to content

Instantly share code, notes, and snippets.

@pierrelorioux

pierrelorioux/index.html

Last active December 19, 2015 07:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pierrelorioux/5916047 to your computer and use it in GitHub Desktop.
Save pierrelorioux/5916047 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="http://mlevans.github.io/leaflet-hash/javascripts/leaflet-hash.js"></script>
<script>
$(document).ready(function() {
// Handler for .ready() called.
var map;
initMap();
function setMapHeight()
{
var map_height = window.innerHeight - document.getElementById("header-container").offsetHeight;
document.getElementById("map").style.height = map_height + "px";
}
function zoomByAbout(e) {
// Assumes map is global and initialized
var x = .5*$('#map').width(),
y = .5*$('#map').height(),
mouse_point = e.containerPoint,
new_center_point = new L.Point((x + mouse_point.x) / 2, (y + mouse_point.y) / 2),
new_center_location = map.containerPointToLatLng(new_center_point);
map.setView(new_center_location, map.getZoom() + 1);
}
function initMap() {
setMapHeight();
// Window Callback; adjust the map on resize
window.onresize = setMapHeight;
// Set up the map
map = L.map('map', {
scrollWheelZoom: false,
doubleClickZoom: false,
attributionControl: false,
zoom: 12,
center: [37.7630,-122.4435]
});
map.on('dblclick', function(e) { zoomByAbout(e) });
L.tileLayer('http://{s}.tile.stamen.com/toner-hybrid/{z}/{x}/{y}.png', {attribution: 'Stamen'}).addTo(map);
// Set up the hash
var hash = new L.Hash(map);
// Removing the marker for now
/*
var markerIcon = L.icon({
iconUrl: 'images/marker.png',
iconSize: [91, 91]
})
var marker = L.marker([37.82497195707114, -122.3710441], {icon: markerIcon}).addTo(map);
marker.on('dblclick', function(e) { zoomByAbout(e) });
*/
}
$('#select_date').change(function(){
$.getJSON('villes.json', function(data) {
var items = [];
$.each(data, function(key, val) {
//Region A
if ($('option:selected').val() === "a") {
var region_checked = val.region === "a" ;
if(region_checked===true){
items.push('<OPTION id="' + val.center + '" center="'+val.center +'">' + key + '</OPTION>');
console.log(items);
/*
var hash = new L.Hash(map);
var elsalvador = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"El Salvador"},"geometry":{"type":"Polygon","coordinates":[[[-89.362598,14.416016],[-89.337256,14.411377],[-89.170117,14.360303],[-89.120508,14.370215],[-89.057129,14.32915],[-89.026855,14.296973],[-89.000195,14.252734],[-88.868311,14.163672],[-88.845947,14.124756],[-88.747363,14.072266],[-88.707617,14.03208],[-88.665625,14.015527],[-88.583154,14.000146],[-88.512549,13.978955],[-88.504346,13.964209],[-88.497656,13.904541],[-88.482666,13.854248],[-88.449121,13.850977],[-88.408496,13.875391],[-88.276221,13.942676],[-88.151025,13.987354],[-88.080469,13.960596],[-88.038721,13.904639],[-87.991016,13.879639],[-87.891992,13.894971],[-87.802246,13.88999],[-87.731445,13.841064],[-87.715332,13.812695],[-87.758545,13.649951],[-87.774219,13.580322],[-87.781885,13.521387],[-87.756445,13.506006],[-87.731641,13.483105],[-87.737012,13.451367],[-87.814209,13.39917],[-87.838379,13.385791],[-87.820703,13.285156],[-87.878076,13.224414],[-87.930859,13.180664],[-88.023438,13.16875],[-88.180664,13.164014],[-88.417139,13.213525],[-88.591553,13.281055],[-88.685645,13.281494],[-88.655859,13.25918],[-88.581543,13.244971],[-88.483887,13.197168],[-88.512012,13.183936],[-88.867041,13.283252],[-89.277637,13.478076],[-89.523242,13.509131],[-89.804199,13.560107],[-89.970459,13.683154],[-90.095215,13.736523],[-90.105908,13.783008],[-90.104736,13.834766],[-90.048145,13.904053],[-89.942676,13.997363],[-89.872705,14.045605],[-89.839941,14.055078],[-89.793701,14.050098],[-89.749365,14.077002],[-89.711133,14.141309],[-89.671289,14.182715],[-89.570264,14.224658],[-89.547168,14.24126],[-89.555029,14.277246],[-89.576953,14.34707],[-89.573633,14.390088],[-89.540527,14.409912],[-89.500879,14.41377],[-89.418848,14.431104],[-89.383252,14.427637],[-89.362598,14.416016]]]}}]};
var myStyle = {
"color": "#66CC9E",
"weight": 2,
"opacity": 0.95
};
var sal = L.geoJson(elsalvador, {style: myStyle}).addTo(map);
*/
};
$('#formupdate').html('<SELECT id = "sousRegA" name="nom" size="1">'+items.join('')+'</SELECT>');
}
//Region B
if ($('option:selected').val() === "b") {
var region_checked = val.region === "b" ;
if(region_checked===true){
items.push('<OPTION id="' + key + '">' + key + '</OPTION>');
console.log(items);
};
$('#formupdate').html('<SELECT id = "sousRegB" name="nom" size="1"><OPTION>select a country..</OPTION>'+items.join('')+'</SELECT>');
}
$('#sousRegA').change(function(){
var f = $( "#sousRegA option:selected").attr('id');
console.log(f);
var g = "["+f+"]" ;
var lat = f.split(",");
map.panTo([lat[0],lat[1]],{duration:1}).setZoom(10);;
//map.panTo([13.8441,-89.4184]);
var hash = new L.Hash(map);
});
});
//End GetJSon
});
//End Change list
});
});
</script>
<style type="text/css">
#map {
top: 150px;
width: 100%;
position: absolute;
background: #fff;
}
</style>
</head>
<body>
<div id="header-container">
<div id="header">
</div>
</div>
<select name="select_region" id="select_date">
<option value="0"> Select a region...</option>
<option value="a"> region A</option>
<option value="b"> region B</option>
</select>
<div id = "formupdate"></div>
<div id="content">
<div class='wrapper'>
<div class='layer' id='map'></div>
</div>
</div>
</body>
</html>
Raw
villes.json
{
"Geneva": {
"region": "a",
"center": "13.8441,-89.4184",
"e": "f"
},
"Roma": {
"region": "a",
"center": "15.8441,-89.4184",
"e": "f"
},
"Paris": {
"region": "b",
"center": "100",
"e": "f"
},
"Bruxelles": {
"region": "b",
"center": "800",
"e": "f"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment