Skip to content

Instantly share code, notes, and snippets.

@ohoroyoi

ohoroyoi/leaflet_tutorial.html

Created August 27, 2019 08:25
Show Gist options
  • Save ohoroyoi/68dc1ae7c345177baa149f5f825cd3bf to your computer and use it in GitHub Desktop.
Save ohoroyoi/68dc1ae7c345177baa149f5f825cd3bf to your computer and use it in GitHub Desktop.
Download ZIP
leaflet save to db and retrieve from db
Raw
leaflet_tutorial.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Leaflet tutorial</title>
</head>
<body>
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 500px;
}
#apicall, #export {
position: absolute;
top:50px;
right:10px;
z-index:3000;
background:white;
color:black;
padding:6px;
border-radius:4px;
font-family: 'Helvetica Neue';
cursor: pointer;
font-size:12px;
text-decoration:none;
}
.leaflet-top {
top: 100px;
}
#export {
top:10px;
}
#clicked_region {
position: absolute;
top: 500px;
}
</style>
<div class="row">
<div id="map"></div>
<div id="apicall">Api로 DB에 저장</div>
<a href='#' id='export'>Export Features</a>
<div id="clicked_region">Clicked Region</div>
</div>
<!-- see here https://output.jsbin.com/bojituv -->
<script>ATLAS_ADMIN_HOST = "http://localhost:8088";</script>
<script>
// make a request to Couchbase to get the features in the current extent
var resp_example = [{
"id": "93cabfb5-1da1-49e7-80d1-d336b5e060a8",
"data": {
"custom_region_info": {
"type": "FeatureCollection",
"features": [
{
"geometry": {
"coordinates": [
127.339084,
36.780266
],
"type": "Point"
},
"type": "Feature",
"properties": {
"name": "matzip00",
"shapeContinent": "AS",
"detail": "맛집아입니까",
"shapeCountry": "KR"
}
}
]
},
"custom_region_detail": "맛집아입니까"
},
"temporary": false,
"is_aoi": "true"
}];
function requestUpdatedCadastre(bounds) {
/*$.ajax({
type: 'GET',
url: ATLAS_ADMIN_HOST + "/admin_api/regions/aois",
dataType: 'json',
success: function (result) {
var custom_region_info = result.map(function (item) { return item["data"]["custom_region_info"]}); // 마커와 폴리곤 배열
parseResponseCadastre(custom_region_info);
},
error: function (req, status, error) {
alert('Unable to get cadastral data:' + error);
}
});*/
var custom_region_info = resp_example.map(function (item) { return item["data"]["custom_region_info"]}); // 마커와 폴리곤 배열
parseResponseCadastre(custom_region_info);
}
// parse the features retrieved from Couchbase
function parseResponseCadastre(data) {
if (drawnItems != undefined)
{
map.removeLayer(drawnItems);
}
for(var i=0; i< data.length; i++) {
L.geoJSON(data[i], {
onEachFeature: function (feature, layer) {
layer.bindPopup('<h1> 지역 '+JSON.stringify(feature.properties.name) +'</h1><p> 상세 정보'+ JSON.stringify(feature.properties) +'</p>');
}
}).addTo(map);
}
}
var latLngs; /* 전체 위경도 배열 */
var aoiDetail;
var map = L.map('map');
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
map.on('load', function(e) {
requestUpdatedCadastre(e.target.getBounds());
});
map.setView([37.507805, 127.056605], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'ohoroyoi',
id: 'mapbox.streets'
}).addTo(map);
// var drawnItems = new L.FeatureGroup();
// map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw : {
position : 'topleft',
polygon : true,
polyline : false,
rectangle : false,
circle : false,
circlemarker : false
},
edit: {
featureGroup: drawnItems,
edit: false,
remove: false
}
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (e) { /* event create*/
var layer = e.layer;
drawnItems.addLayer(layer);
});
var idIW = L.popup();
function saveIdIW() {
// var parentValue = $('#shapeCountry').val() ? $('#shapeCountry').val() : $('#shapeContinent').val();
// var parentType = $('#parentType').val();
var shapeContinent = $('#shapeContinent').val();
var shapeCountry = $('#shapeCountry').val();
var shapeName = $('#shapeName').val();
var shapeDesc = $('#shapeDesc').val();
var drawings = drawnItems.getLayers(); // drawnItems is a container for the drawn objects
drawings[drawings.length - 1].title = shapeName;
drawings[drawings.length - 1].content = shapeDesc;
drawings[drawings.length - 1].shapeContinent = shapeContinent;
drawings[drawings.length - 1].shapeCountry = shapeCountry;
aoiDetail = {"name" : drawings[0].title, "detail": drawings[0].content, "shapeContinent": drawings[0].shapeContinent, "shapeCountry": drawings[0].shapeCountry};
if (idIW) {
map.closePopup();
}
// $('#clicked_region').clear();
$('#clicked_region').append("<div>" + JSON.stringify(drawnItems.toGeoJSON()) + "</div>");
$('#clicked_region').append("<div>" + JSON.stringify(aoiDetail) + "</div>");
}
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
// Do marker specific actions
}
if (Array.isArray(layer._latlngs)) {
latLngs = layer._latlngs[0];
} else {
var temp_arr = [];
temp_arr.push(layer._latlng);
latLngs = temp_arr;
}
// Do whatever else you need to. (save to db; add to map etc)
// var idIW = L.popup();
var result = confirm("만들려는 지역이 도시 레벨입니까? \n\n ex) \n 확인 : 홍대 - 도시레벨 \n 취소 : 동유럽 - 국가레벨 이상");
var content = result ?
'<span><b>Shape Continent</b></span><br/>' +
'<input id="shapeContinent" type="text" placeholder="지역을 포함시킬 대륙을 영어로 작성하세요"/>' +
'<br/>' +
'<br/>' +
'<span><b>Shape Country<b/></span><br/>' +
'<input id="shapeCountry" type="text"/>' +
'<br/>' +
'<br/>' +
'<span><b>Shape Name</b></span><br/>' +
'<input id="shapeName" type="text" placeholder="영어로 작성하세요"/>' +
'<br/>' +
'<br/>' +
'<span><b>Shape Description<b/></span>' +
'<br/>' +
'<textarea id="shapeDesc" cols="25" rows="5" placeholder="한글작성 가능"></textarea>' +
'<br/>' +
'<br/>' +
'<input type="button" id="okBtn" value="Save" onclick="saveIdIW()"/>'
:
'<span><b>Shape Continent<b/></span><br/>' +
'<input id="shapeContinent" type="text" placeholder="지역을 포함시킬 대륙을 영어로 작성하세요" />' +
'<br/>' +
'<br/>' +
'<span><b>Shape Name</b></span><br/>' +
'<input id="shapeName" type="text"/>' +
'<br/>' +
'<br/>' +
'<span><b>Shape Description<b/></span>' +
'<br/>' +
'<textarea id="shapeDesc" cols="25" rows="5"></textarea>' +
'<br/>' +
'<br/>' +
'<input type="button" id="okBtn" value="Save" onclick="saveIdIW()"/>';
idIW.setContent(content);
if (layer._bounds) {
var bounds = layer.getBounds();
// idIW.setLataLng($scope.latLng);
idIW.setLatLng(bounds.getCenter()); //calculated based on the e.layertype
} else {
idIW.setLatLng(layer._latlng);
}
idIW.openOn(map);
map.addLayer(layer);
});
map.on('draw:edited', function (e) {
var layers = e.layers;
layers.eachLayer(function (layer) {
//do whatever you want; most likely save back to db
});
});
map.on('draw:deleted', function (e) {
var type = e.layerType,
layer = e.layer;
drawnItems.clearLayers(e.layer);
});
document.getElementById('export').onclick = function(e) {
// Extract GeoJson from featureGroup
var data = drawnItems.toGeoJSON();
data.features[0].properties = aoiDetail;
var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
document.getElementById('export').setAttribute('href', 'data:' + convertedData);
document.getElementById('export').setAttribute('download','data.geojson');
}
document.getElementById('apicall').onclick = function(e) {
var data = drawnItems.toGeoJSON();
data.features[0].properties = aoiDetail;
var polygon = data.features[0].geometry.coordinates;
var postValue = {};
postValue.detail = aoiDetail.detail;
postValue.detailData = data;
postValue.name = aoiDetail.name;
postValue.polygon = polygon;
postValue.shapeContinent = aoiDetail.shapeContinent;
postValue.shapeCountry = aoiDetail.shapeCountry;
$.ajax({
type: "POST",
url: ATLAS_ADMIN_HOST + "/admin_api/regions/add",
data: JSON.stringify(postValue), //aoiDetail
// dataType: "json",
contentType: "application/json;charset=utf-8",
success: function(resp) {
console.log(resp);
alert("추가");
window.location.reload();
},
error: function(error) {
console.log(error);
}
});
}
function getAllAoi() {
$.ajax({
type: "GET",
url: ATLAS_ADMIN_HOST + "/admin_api/regions/aois",
success: function(resp) {
console.log(resp);
},
error: function(error) {
console.log(error);
}
});
}
$(function() {
getAllAoi();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment