Commit 5494510e authored by yann-g's avatar yann-g Committed by Alain ANDRÉ
Browse files

html, css and js splitted

parent d53510c6
<!DOCTYPE html>
<html>
<head>
<title>Geocode</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div>
</div>
<div class="form-wrapper">
<form id="geocoder-form">
<input type="text" id="q" name="q" placeholder="Search for an address..." />
<input type="text" id="country" name="country" value="France" />
<button type="submit" id="submit" name="submit">Geocode</button>
</form>
</div>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<script type="text/javascript" src='0.1/map.js?api_key=<%= params['api_key'] || 'demo' %>'></script>
<script>
var map = L.mapotempo.map('map').setView([44.837778, -0.579197], 13);
var markers = [];
var markersGroup = L.layerGroup();
$('#geocoder-form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: "0.1/geocode.json?api_key=<%= params['api_key'] || 'demo' %>",
method: 'GET',
data: {
country: $('#country').val(),
query: $('#q').val()
},
context: document.body
}).done(function(resp) {
geocodeHandler(resp);
});
});
$("#q").autocomplete({
source: function(request, response) {
markers.length = 0;
markersGroup.clearLayers();
$.ajax({
url: "0.1/geocode.json?api_key=<%= params['api_key'] || 'demo' %>",
dataType: "json",
method: 'PATCH',
data: {
country: $('#country').val(),
query: request.term
},
context: document.body,
success: function(data) {
response(data.features.map(function(feature) {
return feature.properties.geocoding;
}));
}
}).done(function(resp) {
geocodeHandler(resp);
});
},
minLength: 3,
delay: 500,
select: function(e, ui) {
$.ajax({
url: "0.1/geocode.json?api_key=<%= params['api_key'] || 'demo' %>",
method: 'GET',
data: {
country: $('#country').val(),
query: ui.item.value
},
success: function(data) {
return data.features.map(function(feature) {
return feature.properties.geocoding;
});
},
context: document.body
}).done(function(resp) {
geocodeHandler(resp);
});
}
});
var geocodeHandler = function geocodeHandler(resp) {
markers.length = 0;
markersGroup.clearLayers();
if (resp.features.length) {
resp.features.forEach(function(feat) {
if (feat.geometry && feat.geometry.coordinates) {
markers.push(L.marker(feat.geometry.coordinates.reverse())
.bindPopup('<div>' + feat.properties.geocoding.name + '</div><div>' + (feat.properties.geocoding.postcode || '') + ' ' + feat.properties.geocoding.city + '</div><div>Score: ' + feat.properties.geocoding.score.toFixed(2) + '</div>'));
}
});
if (markers.length) {
markersGroup = L.layerGroup(markers);
markersGroup.addTo(map);
var bounds = new L.LatLngBounds(markers.map(function(marker) {
return marker.getLatLng();
}));
L.Icon.Default.extend({});
markers[0]
.setIcon(new L.Icon({
iconUrl: 'marker-icon-yellow.png',
shadowUrl: 'marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
tooltipAnchor: [16, -28],
shadowSize: [41, 41]
}))
.setZIndexOffset(1000)
.openPopup();
map.fitBounds(bounds, {
padding: [30, 30]
});
}
}
else {
alert("No result");
}
};
</script>
</body>
<head>
<title>Geocode</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="form-wrapper">
<form id="geocoder-form">
<input type="text" id="q" name="q" placeholder="Search for an address..." />
<input type="text" id="country" name="country" value="France" />
<button type="submit" id="submit" name="submit">Geocode</button>
</form>
</div>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<script type="text/javascript" src='0.1/map.js?api_key=<%= params['api_key'] || 'demo' %>'></script>
<script type="text/javascript" src='js/geocode.js'></script>
</body>
</html>
var map = L.mapotempo.map('map').setView([44.837778, -0.579197], 13);
var markers = [];
var markersGroup = L.layerGroup();
var geocode_url = "0.1/geocode.json?api_key=<%= params['api_key'] || 'demo' %>"
$('#geocoder-form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: geocode_url,
method: 'GET',
data: {
country: $('#country').val(),
query: $('#q').val()
},
context: document.body
}).done(function(resp) {
geocodeHandler(resp);
});
});
$("#q").autocomplete({
source: function(request, response) {
markers.length = 0;
markersGroup.clearLayers();
$.ajax({
url: geocode_url,
dataType: "json",
method: 'PATCH',
data: {
country: $('#country').val(),
query: request.term
},
context: document.body,
success: function(data) {
response(data.features.map(function(feature) {
return feature.properties.geocoding;
}));
}
}).done(function(resp) {
geocodeHandler(resp);
});
},
minLength: 3,
delay: 500,
select: function(e, ui) {
$.ajax({
url: geocode_url,
method: 'GET',
data: {
country: $('#country').val(),
query: ui.item.value
},
success: function(data) {
return data.features.map(function(feature) {
return feature.properties.geocoding;
});
},
context: document.body
}).done(function(resp) {
geocodeHandler(resp);
});
}
});
var geocodeHandler = function geocodeHandler(resp) {
markers.length = 0;
markersGroup.clearLayers();
if (resp.features.length) {
resp.features.forEach(function(feat) {
if (feat.geometry && feat.geometry.coordinates) {
markers.push(L.marker(feat.geometry.coordinates.reverse())
.bindPopup('<div>' + feat.properties.geocoding.name + '</div><div>' + (feat.properties.geocoding.postcode || '') + ' ' + feat.properties.geocoding.city + '</div><div>Score: ' + feat.properties.geocoding.score.toFixed(2) + '</div>'));
}
});
if (markers.length) {
markersGroup = L.layerGroup(markers);
markersGroup.addTo(map);
var bounds = new L.LatLngBounds(markers.map(function(marker) {
return marker.getLatLng();
}));
L.Icon.Default.extend({});
markers[0]
.setIcon(new L.Icon({
iconUrl: 'marker-icon-yellow.png',
shadowUrl: 'marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
tooltipAnchor: [16, -28],
shadowSize: [41, 41]
}))
.setZIndexOffset(1000)
.openPopup();
map.fitBounds(bounds, {
padding: [30, 30]
});
}
}
else {
alert("No result");
}
};
var map = L.mapotempo.map('map').setView([44.837778, -0.579197], 13);
var marker = undefined;
map.on('click', function(e) {
if (marker) {
map.removeLayer(marker);
}
marker = null;
$.ajax({
url: "0.1/reverse.json?api_key=<%= params['api_key'] || 'demo' %>",
method: 'GET',
data: {
lat: e.latlng.lat,
lng: e.latlng.lng
},
context: document.body
}).done(function(resp) {
if (resp.features.length) {
resp.features.forEach(function(feat) {
if (feat.geometry && feat.geometry.coordinates) {
marker = L.marker(feat.geometry.coordinates.reverse())
.addTo(map)
.bindPopup('<div>' + feat.properties.geocoding.name + '</div><div>' + feat.properties.geocoding.postcode + ' ' + feat.properties.geocoding.city + '</div><div>Score: ' + feat.properties.geocoding.score.toFixed(2) + '</div>')
.openPopup();
}
});
}
else {
alert("No result");
}
}).fail(function(resp) {
alert("An error has occured: " + JSON.stringify(resp));
});
});
<!DOCTYPE html>
<html>
<head>
<title>Reverse Geocoding</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div>
</div>
<div class="reverse-info">
<p>
Click on the map to find address!
</p>
</div>
<div id="map" style="width: 100%; height: 100%"></div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<script type="text/javascript" src='0.1/map.js?api_key=<%= params['api_key'] || 'demo' %>'></script>
<script>
var map = L.mapotempo.map('map').setView([44.837778, -0.579197], 13);
var marker = undefined;
map.on('click', function(e) {
if (marker) {
map.removeLayer(marker);
}
marker = null;
$.ajax({
url: "0.1/reverse.json?api_key=<%= params['api_key'] || 'demo' %>",
method: 'GET',
data: {
lat: e.latlng.lat,
lng: e.latlng.lng
},
context: document.body
}).done(function(resp) {
if (resp.features.length) {
resp.features.forEach(function(feat) {
if (feat.geometry && feat.geometry.coordinates) {
marker = L.marker(feat.geometry.coordinates.reverse())
.addTo(map)
.bindPopup('<div>' + feat.properties.geocoding.name + '</div><div>' + feat.properties.geocoding.postcode + ' ' + feat.properties.geocoding.city + '</div><div>Score: ' + feat.properties.geocoding.score.toFixed(2) + '</div>')
.openPopup();
}
});
}
else {
alert("No result");
}
}).fail(function(resp) {
alert("An error has occured: " + JSON.stringify(resp));
});
});
</script>
</body>
<head>
<title>Reverse Geocoding</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="reverse-info">
<p>
Click on the map to find address!
</p>
</div>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<script type="text/javascript" src='0.1/map.js?api_key=<%= params['api_key'] || 'demo' %>'></script>
<script src='/js/reverse.js'></script>
</body>
</html>
......@@ -7,7 +7,7 @@
z-index: -1;
}
.form-wrapper, .reverse-info {
#geocoder-form, .reverse-info {
left: 50px;
position: absolute;
margin-top: 3px;
......@@ -26,14 +26,14 @@
color: #2D2D2D;
}
input {
#geocoder-form > input {
height: 25px;
border-radius: 0px;
border: 1px solid #13B0CA;
padding-left: 10px;
}
button {
#geocoder-form > button {
font-weight: 600;
height: 29px;
color: white;
......@@ -43,9 +43,10 @@ button {
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
button[type="submit"]:hover {
#geocoder-form > button[type="submit"]:hover {
cursor: pointer;
}
input[type=text]:focus {
#geocoder-form > input[type=text]:focus {
border:2px solid #13CA89;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment