kopia lustrzana https://github.com/hholzgra/maposmatic/
switched from OpenLayers to Leaflet, and having bower manage assets
Hartmut Holzgraefe
rodzic
30d5fd1032
commit
b8899c3ca7
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"directory" : "www/static/bower"
|
||||
}
|
||||
|
|
@ -31,3 +31,10 @@
|
|||
|
||||
# From www
|
||||
*.pyc
|
||||
|
||||
# Ignore bower installation directory
|
||||
/www/static/bower
|
||||
|
||||
# Ignore output directories
|
||||
/logs
|
||||
/rendering
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "maposmatic",
|
||||
"homepage": "https://github.com/hholzgra/maposmatic",
|
||||
"description": "maposmatic django web frontend",
|
||||
"main": "manage.py",
|
||||
"keywords": [
|
||||
"osm",
|
||||
"print"
|
||||
],
|
||||
"authors": [
|
||||
"Hartmut Holzgraefe <hartmut@php.net>"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"www/static/bower",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "^1.11.0",
|
||||
"font-awesome": "^4.6.3",
|
||||
"bootstrap": "^2.2.2",
|
||||
"leaflet": "^0.7.7",
|
||||
"leaflet-search": "^2.6.1",
|
||||
"Leaflet.EasyButton": "^1.3.1",
|
||||
"leaflet-areaselect": "*",
|
||||
"leaflet-locationfilter": "*",
|
||||
}
|
||||
}
|
||||
|
|
@ -34,12 +34,34 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link rel="shortcut icon" href="/media/img/favicon.png" />
|
||||
<link rel="stylesheet" href="/media/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="/media/css/bootstrap-responsive.min.css" />
|
||||
<link rel="stylesheet" href="/media/css/maposmatic.css" />
|
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
|
||||
|
||||
<link rel="feed" title="{% trans "Maps feed" %}" href="/feed/maps/" />
|
||||
</head>
|
||||
|
||||
<link rel="stylesheet" href="/media/css/maposmatic.css" />
|
||||
|
||||
<link rel="stylesheet" href="/media/bower/font-awesome/css/font-awesome.min.css">
|
||||
|
||||
<script src="/media/bower/jquery/dist/jquery.js"></script>
|
||||
|
||||
<script src="/media/bower/bootstrap/docs/assets/js/bootstrap.js"></script>
|
||||
<link rel="stylesheet" href="/media/bower/bootstrap/docs/assets/css/bootstrap.css" />
|
||||
<link rel="stylesheet" href="/media/bower/bootstrap/docs/assets/css/bootstrap-responsive.css" />
|
||||
|
||||
<script src="/media/bower/leaflet/dist/leaflet.js"></script>
|
||||
<link rel="stylesheet" href="/media/bower/leaflet/dist/leaflet.css" />
|
||||
|
||||
<link rel="stylesheet" href="/media/bower/leaflet-search/src/leaflet-search.css"/>
|
||||
<script src="/media/bower/leaflet-search/src/leaflet-search.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/media/bower/Leaflet.EasyButton/src/easy-button.css"/>
|
||||
<script src="/media/bower/Leaflet.EasyButton/src/easy-button.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/media/bower/leaflet-areaselect/src/leaflet-areaselect.css"/>
|
||||
<script src="/media/bower/leaflet-areaselect/src/leaflet-areaselect.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/media/bower/leaflet-locationfilter/src/locationfilter.css"/>
|
||||
<script src="/media/bower/leaflet-locationfilter/src/locationfilter.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="{% block body-class %}{% endblock %}">
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
|
|
@ -122,52 +144,51 @@
|
|||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="http://openlayers.org/api/OpenLayers.js"></script>
|
||||
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
|
||||
<script src="/media/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var locationFilter = null;
|
||||
|
||||
// Set focus to the search field
|
||||
$('#id_query').focus();
|
||||
|
||||
$('.tooltipped').tooltip();
|
||||
$('.popovered').popover();
|
||||
|
||||
var epsg_display_projection = new OpenLayers.Projection('EPSG:4326');
|
||||
var epsg_projection = new OpenLayers.Projection('EPSG:900913');
|
||||
|
||||
function set_map_bounds(map, array, closest) {
|
||||
var bounds = new OpenLayers.Bounds();
|
||||
bounds.extend(new OpenLayers.LonLat(array[0][1], array[0][0]));
|
||||
bounds.extend(new OpenLayers.LonLat(array[1][1], array[1][0]));
|
||||
bounds.transform(epsg_display_projection, epsg_projection);
|
||||
map.zoomToExtent(bounds, false);
|
||||
try {
|
||||
map.fitBounds([[array[0][0],array[0][1]],[array[1][0],array[1][1]]]);
|
||||
} catch (err) {
|
||||
}
|
||||
}
|
||||
|
||||
function create_map(elt) {
|
||||
var map = new OpenLayers.Map(elt.attr('id'), {
|
||||
controls: [new OpenLayers.Control.Attribution()],
|
||||
maxExtent: new OpenLayers.Bounds(-20037508.34, - 20037508.34, 20037508.34, 20037508.34),
|
||||
numZoomLevels: 18,
|
||||
maxResolution: 156543.0399,
|
||||
projection: epsg_projection,
|
||||
displayProjection: epsg_display_projection
|
||||
});
|
||||
map.addLayer(new OpenLayers.Layer.OSM.Mapnik('Mapnik'));
|
||||
var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
|
||||
var mbOsm = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
||||
var osm = L.tileLayer(mbOsm, {attribution: mbAttr});
|
||||
|
||||
var map = L.map(elt.attr('id'), {
|
||||
center: [52.022, 8.538],
|
||||
zoom: 13
|
||||
}).addLayer(osm);
|
||||
|
||||
if (elt.attr('data-geo-osm-id') && elt.attr('data-geo-osm-id') != 'None') {
|
||||
$.getJSON('/apis/boundingbox/' + elt.attr('data-geo-osm-id') + '/',
|
||||
function(data) {
|
||||
set_map_bounds(map, data);
|
||||
L.rectangle(data, {stroke: true, fill: false, color: '#0000ff', weight: 1, opacity: 0.5}).addTo(map);
|
||||
})
|
||||
.error(function() {
|
||||
map.zoomToMaxExtent();
|
||||
map.fitWorld();
|
||||
});
|
||||
} else {
|
||||
} else if (elt.attr('data-geo-from-lat')) {
|
||||
set_map_bounds(map, [
|
||||
[elt.attr('data-geo-from-lat'), elt.attr('data-geo-from-lon')],
|
||||
[elt.attr('data-geo-to-lat'), elt.attr('data-geo-to-lon')]
|
||||
]);
|
||||
L.rectangle([
|
||||
[elt.attr('data-geo-from-lat'), elt.attr('data-geo-from-lon')],
|
||||
[elt.attr('data-geo-to-lat'), elt.attr('data-geo-to-lon')]
|
||||
], {stroke: true, fill: false, color: '#0000ff', weight: 1, opacity: 0.5}
|
||||
).addTo(map);
|
||||
}
|
||||
|
||||
return map;
|
||||
|
|
|
|||
|
|
@ -262,7 +262,38 @@ function wizardmap(elt) {
|
|||
strokeWidth: 2
|
||||
};
|
||||
var countryquery = null;
|
||||
var locationFilter = new L.LocationFilter({buttonPosition: 'topright'});
|
||||
locationFilter.on("change", function (e) {
|
||||
bbox = e.bounds;
|
||||
map.fitBounds(e.bounds);
|
||||
update_fields();
|
||||
});
|
||||
locationFilter.on("enabled", function (e) {
|
||||
bbox = e.bounds;
|
||||
map.fitBounds(e.bounds);
|
||||
update_fields();
|
||||
});
|
||||
locationFilter.on("disabled", function (e) {
|
||||
bbox = null;
|
||||
update_fields();
|
||||
});
|
||||
locationFilter.addTo(map);
|
||||
|
||||
// search button
|
||||
map.addControl( new L.Control.Search({
|
||||
url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
|
||||
jsonpParam: 'json_callback',
|
||||
propertyName: 'display_name',
|
||||
propertyLoc: ['lat','lon'],
|
||||
circleLocation: true,
|
||||
markerLocation: false,
|
||||
autoType: false,
|
||||
autoCollapse: true,
|
||||
minLength: 2,
|
||||
zoom: 17
|
||||
}) );
|
||||
|
||||
|
||||
/**
|
||||
* Update the 4 text fields with the area coordinates.
|
||||
*
|
||||
|
|
@ -274,30 +305,33 @@ function wizardmap(elt) {
|
|||
return;
|
||||
}
|
||||
|
||||
var bounds = new OpenLayers.Bounds((bbox || map.getExtent()).toArray());
|
||||
bounds.transform(epsg_projection, epsg_display_projection);
|
||||
var bounds = (bbox != null) ? bbox : map.getBounds();
|
||||
|
||||
$('#id_lat_upper_left').val(bounds.top.toFixed(4));
|
||||
$('#id_lon_upper_left').val(bounds.left.toFixed(4));
|
||||
$('#id_lat_bottom_right').val(bounds.bottom.toFixed(4));
|
||||
$('#id_lon_bottom_right').val(bounds.right.toFixed(4));
|
||||
$('#id_lat_upper_left').val(bounds.getNorth().toFixed(4));
|
||||
|
||||
var center = bounds.getCenterLonLat();
|
||||
var upper_left = new OpenLayers.LonLat(bounds.left, bounds.top);
|
||||
var upper_right = new OpenLayers.LonLat(bounds.right, bounds.top);
|
||||
var bottom_right = new OpenLayers.LonLat(bounds.right, bounds.bottom);
|
||||
var width = OpenLayers.Util.distVincenty(upper_left, upper_right);
|
||||
var height = OpenLayers.Util.distVincenty(upper_right, bottom_right);
|
||||
$('#id_lon_upper_left').val(bounds.getWest().toFixed(4));
|
||||
$('#id_lat_bottom_right').val(bounds.getSouth().toFixed(4));
|
||||
$('#id_lon_bottom_right').val(bounds.getEast().toFixed(4));
|
||||
|
||||
if (width < BBOX_MAXIMUM_LENGTH_IN_KM &&
|
||||
height < BBOX_MAXIMUM_LENGTH_IN_KM) {
|
||||
var center = bounds.getCenter();
|
||||
|
||||
var upper_left = bounds.getNorthWest();
|
||||
var upper_right = bounds.getNorthEast();
|
||||
var bottom_left = bounds.getSouthWest();
|
||||
var bottom_right = bounds.getSouthEast();
|
||||
|
||||
var width = upper_left.distanceTo(upper_right);
|
||||
var height = upper_right.distanceTo(bottom_right);
|
||||
|
||||
if (width < {{ BBOX_MAXIMUM_LENGTH_IN_METERS }} &&
|
||||
height < {{ BBOX_MAXIMUM_LENGTH_IN_METERS }}) {
|
||||
$('#area-size-alert').hide();
|
||||
$('#nextlink').show();
|
||||
|
||||
// Attempt to get the country by reverse geo lookup
|
||||
if (countryquery != null) { countryquery.abort(); }
|
||||
countryquery = $.getJSON(
|
||||
'/apis/reversegeo/' + center.lat + '/' + center.lon + '/',
|
||||
'/apis/reversegeo/' + center.lat + '/' + center.lng + '/',
|
||||
function(data) {
|
||||
$.each(data, function(i, item) {
|
||||
if (typeof item.country_code != 'undefined') {
|
||||
|
|
@ -316,6 +350,7 @@ function wizardmap(elt) {
|
|||
* fields.
|
||||
*/
|
||||
var set_map_bounds_from_fields = function() {
|
||||
return;
|
||||
lock = true;
|
||||
set_map_bounds(map, [
|
||||
[$('#id_lat_upper_left').val(), $('#id_lon_upper_left').val()],
|
||||
|
|
@ -324,76 +359,11 @@ function wizardmap(elt) {
|
|||
lock = false;
|
||||
};
|
||||
|
||||
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
|
||||
map.addLayer(vectorLayer);
|
||||
|
||||
var selectControl = new OpenLayers.Control();
|
||||
OpenLayers.Util.extend(selectControl, {
|
||||
draw: function() {
|
||||
this.box = new OpenLayers.Handler.Box(selectControl, {
|
||||
'done': this.notice
|
||||
}, {
|
||||
keyMask: navigator.platform.match(/Mac/)
|
||||
? OpenLayers.Handler.MOD_ALT
|
||||
: OpenLayers.Handler.MOD_CTRL
|
||||
});
|
||||
this.box.activate();
|
||||
},
|
||||
// Bind events.
|
||||
map.on('moveend', update_fields);
|
||||
map.on('zoomend', update_fields);
|
||||
|
||||
notice: function(pxbounds) {
|
||||
vectorLayer.destroyFeatures();
|
||||
bbox = null;
|
||||
|
||||
var ltpixel = map.getLonLatFromPixel(
|
||||
new OpenLayers.Pixel(pxbounds.left, pxbounds.top));
|
||||
var rbpixel = map.getLonLatFromPixel(
|
||||
new OpenLayers.Pixel(pxbounds.right, pxbounds.bottom));
|
||||
if (!ltpixel.equals(rbpixel)) {
|
||||
bbox = new OpenLayers.Bounds();
|
||||
bbox.extend(ltpixel);
|
||||
bbox.extend(rbpixel);
|
||||
|
||||
vectorLayer.addFeatures(new OpenLayers.Feature.Vector(
|
||||
bbox.toGeometry(), {}, bbox_style));
|
||||
|
||||
update_fields();
|
||||
set_map_bounds_from_fields();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var clearControl = new OpenLayers.Control.Button({
|
||||
displayClass: 'clear-features olControlButton',
|
||||
title: '{% trans "Clear selected area" %}',
|
||||
trigger: function() {
|
||||
vectorLayer.destroyFeatures();
|
||||
bbox = null;
|
||||
update_fields();
|
||||
set_map_bounds_from_fields();
|
||||
update_fields();
|
||||
},
|
||||
});
|
||||
|
||||
var clearPanel = new OpenLayers.Control.Panel({
|
||||
defaultControl: clearControl,
|
||||
createControlMarkup: function(control) {
|
||||
var i = document.createElement('i');
|
||||
$(i).addClass('icon-retweet');
|
||||
$(i).attr('title', control.title);
|
||||
return i;
|
||||
},
|
||||
});
|
||||
clearPanel.addControls([clearControl]);
|
||||
|
||||
map.addControl(new OpenLayers.Control.Navigation());
|
||||
map.addControl(new OpenLayers.Control.PanZoom());
|
||||
map.addControl(new OpenLayers.Control.PinchZoom());
|
||||
map.addControl(selectControl);
|
||||
map.addControl(clearPanel);
|
||||
|
||||
/* Bind events. */
|
||||
map.events.register('zoomend', map, update_fields);
|
||||
map.events.register('moveend', map, update_fields);
|
||||
$('#step-location-bbox input').bind('keydown', function(e) {
|
||||
if (bbox) {
|
||||
return;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue