Skip to content

Commit

Permalink
Use mapbox.js instead of vanilla Leaflet. MapQuest tiles will stop wo…
Browse files Browse the repository at this point in the history 
…rking soon.
  • Loading branch information
@JasonSanford
JasonSanford committed Jun 16, 2016
1 parent 0b04c20 commit b162711
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 92 deletions.
168 changes: 78 additions & 90 deletions geojsonlint/static/js/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,122 @@
(function() {
var map;
$(document).ready(function() {
var road_layer = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
maxZoom: 18,
subdomains: ['1', '2', '3', '4'],
attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>. Map data (c) <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, CC-BY-SA.'
}),
satellite_layer = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
maxZoom: 18,
subdomains: ['1', '2', '3', '4'],
attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>.'
}),
map = new L.Map('map-container', {
center: new L.LatLng(37.92686760148135, -96.767578125),
zoom: 4,
layers: [
road_layer
]
});
var map;

$(document).ready(function() {
L.mapbox.accessToken = 'pk.eyJ1IjoiamNzYW5mb3JkIiwiYSI6InRJMHZPZFUifQ.F4DMGoNgU3r2AWLY0Eni-w';
map = L.mapbox.map('map-container', 'mapbox.streets')
map.setView([37.92686, -96.76757], 4);

var geojsonLayer = new L.GeoJSON(null, {
onEachFeature: function (feature, layer) {
if (feature.properties) {
var popupString = '<div class="popup">';
for (var k in feature.properties) {
var v = feature.properties[k];
popupString += k + ': ' + v + '<br />';
}
popupString += '</div>';
layer.bindPopup(popupString, {
maxHeight: 200
});
}
onEachFeature: function (feature, layer) {
if (feature.properties) {
var popupString = '<div class="popup">';
for (var k in feature.properties) {
var v = feature.properties[k];
popupString += k + ': ' + v + '<br />';
}
popupString += '</div>';
layer.bindPopup(popupString, {
maxHeight: 200
});
}
}
});

map.addLayer(geojsonLayer);

L.control.layers({'Road': road_layer, 'Satellite': satellite_layer}, {'GeoJSON': geojsonLayer}).addTo(map);

$('#submit').on('click', function() {
if ($('#geojson-input').val().length < 1) {
return;
}
var testJson = $('#geojson-input').val();

var errors = geojsonhint.hint(testJson);

if (errors.length > 0) {
var message = errors.map(function(error) {
return 'Line ' + error.line + ': ' + error.message;
}).join('<br>')
$('#modal-message-body').html(message);
$('#modal-message-header').html('Invalid GeoJSON');
$('#modal-message').modal('show');
} else {
if ($('#clear-current').attr('checked')) {
geojsonLayer.clearLayers();
}
geojsonLayer.addData(JSON.parse($('#geojson-input').val()));
map.fitBounds(geojsonLayer.getBounds());
if ($('#geojson-input').val().length < 1) {
return;
}

var testJson = $('#geojson-input').val();
var errors = geojsonhint.hint(testJson);

if (errors.length > 0) {
var message = errors.map(function(error) {
return 'Line ' + error.line + ': ' + error.message;
}).join('<br>')

$('#modal-message-body').html(message);
$('#modal-message-header').html('Invalid GeoJSON');
$('#modal-message').modal('show');

} else {
if ($('#clear-current').attr('checked')) {
geojsonLayer.clearLayers();
}

geojsonLayer.addData(JSON.parse($('#geojson-input').val()));
map.fitBounds(geojsonLayer.getBounds());
}
});

$('#clear').on('click', function() {
$('#geojson-input').val('');
$('#geojson-input').val('');
});

$('.modal-close').on('click', function(event) {
event.preventDefault();
$('#' + $(this).attr('id').split('-close')[0]).modal('hide');
event.preventDefault();
$('#' + $(this).attr('id').split('-close')[0]).modal('hide');
});

$('a[data-toggle="tab"]').on('shown', function(event) {
showGeoJsonSample($(event.target).attr('data-geojson-type'));
$('#submit').trigger('click');
showGeoJsonSample($(event.target).attr('data-geojson-type'));
$('#submit').trigger('click');
});

if (window.File && window.FileReader) {
$('#geojson-input').on('dragenter', function (event) {
showDroppable();
event.preventDefault();
});
$('#geojson-input').on('dragenter', function (event) {
showDroppable();
event.preventDefault();
});

$('#geojson-input').on('dragleave', function (event) {
hideDroppable();
event.preventDefault();
});
$('#geojson-input').on('dragleave', function (event) {
hideDroppable();
event.preventDefault();
});

$('#geojson-input').on('dragover', function (event) {
event.preventDefault();
});
$('#geojson-input').on('dragover', function (event) {
event.preventDefault();
});

$('#geojson-input').on('drop', function (event) {
event.preventDefault();
$('#geojson-input').on('drop', function (event) {
event.preventDefault();

hideDroppable();
hideDroppable();

var dt = event.originalEvent.dataTransfer,
files = dt.files,
types = dt.types;
var dt = event.originalEvent.dataTransfer,
files = dt.files,
types = dt.types;

if (files) {
var file = files[0];
if (files) {
var file = files[0];

if (file.name.indexOf('.json') !== -1 || file.name.indexOf('.geojson') !== -1) {
var reader = new FileReader();
if (file.name.indexOf('.json') !== -1 || file.name.indexOf('.geojson') !== -1) {
var reader = new FileReader();

reader.onload = function () {
$('#geojson-input').val(reader.result);
};
reader.onload = function () {
$('#geojson-input').val(reader.result);
};

reader.readAsText(file);
}
}
});
reader.readAsText(file);
}
}
});
}

showGeoJsonSample('Point');

function showGeoJsonSample(geojsonType) {
$('#geojson-input').val(JSON.stringify(window[geojsonType], null, 4));
$('#geojson-input').val(JSON.stringify(window[geojsonType], null, 4));
}

function showDroppable() {
$('#geojson-input').addClass('drop-it');
$('#geojson-input').addClass('drop-it');
}

function hideDroppable() {
$('#geojson-input').removeClass('drop-it');
$('#geojson-input').removeClass('drop-it');
}
});
});
}());
4 changes: 2 additions & 2 deletions geojsonlint/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<link href='//api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet'>
<link rel="stylesheet" href="/static/css/app.css">
</head>

Expand Down Expand Up @@ -122,7 +122,7 @@ <h3 id="modal-message-header">Invalid JSON</h3>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src='//api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<script src="/static/js/geojsonhint.js"></script>
<script src="/static/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/js/sample-geojson.js"></script>
Expand Down

0 comments on commit b162711

Please sign in to comment.