website/js/nominatim-ui.js

   1 var map;
   2 var last_click_latlng;
   3
   4 jQuery(document).on('ready', function(){
   5
   6         if ( !$('#search-page').length ){ return; }
   7
   8         $('#q').focus();
   9
  10         map = new L.map('map', {
  11                                 center: [nominatim_map_init.lat, nominatim_map_init.lon],
  12                                 zoom:   nominatim_map_init.zoom,
  13                                 attributionControl: false,
  14                                 scrollWheelZoom:    false,
  15                                 touchZoom:          false,
  16                         });
  17
  18         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  19                 // moved to footer
  20                 // attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  21         }).addTo(map);
  22
  23
  24
  25         function display_map_position(mouse_lat_lng){
  26
  27                 html_mouse = "mouse position " + (mouse_lat_lng ? [mouse_lat_lng.lat.toFixed(5), mouse_lat_lng.lng.toFixed(5)].join(',') : '-');
  28                 html_click = "last click: " + (last_click_latlng ? [last_click_latlng.lat.toFixed(5),last_click_latlng.lng.toFixed(5)].join(',') : '-');
  29
  30                 html_center =
  31                         "map center: " +
  32                         map.getCenter().lat.toFixed(5) + ',' + map.getCenter().lng.toFixed(5) +
  33                         " <a target='_blank' href='" + map_link_to_osm() + "'>view on osm.org</a>";
  34
  35                 html_viewbox = "viewbox: " + map_viewbox_as_string();
  36
  37                 $('#map-position').html([html_center,html_viewbox,html_click,html_mouse].join('<br/>'));
  38                 $('input#use_viewbox').trigger('change');
  39         }
  40
  41         map.on('move', function(e) {
  42                 display_map_position();
  43         });
  44
  45         map.on('mousemove', function(e) {
  46                 display_map_position(e.latlng);
  47         });
  48
  49         map.on('click', function(e) {
  50                 last_click_latlng = e.latlng;
  51                 display_map_position();
  52         });
  53
  54         map.on('load', function(e){
  55                 display_map_position();
  56         });
  57
  58
  59         $('input#use_viewbox').on('change', function(){
  60                 $('input[name=viewbox]').val( $(this).prop('checked') ? map_viewbox_as_string() : '');
  61         });
  62
  63
  64
  65         function map_viewbox_as_string() {
  66                 // since .toBBoxString() doesn't round numbers
  67                 return [
  68                         map.getBounds().getSouthWest().lat.toFixed(5),
  69                         map.getBounds().getSouthWest().lng.toFixed(5),
  70                         map.getBounds().getNorthEast().lat.toFixed(5),
  71                         map.getBounds().getNorthEast().lng.toFixed(5) ].join(',');
  72         }
  73         function map_link_to_osm(){
  74                 return "http://openstreetmap.org/#map=" + map.getZoom() + "/" + map.getCenter().lat + "/" + map.getCenter().lng;
  75         }
  76
  77         function get_result_element(position){
  78                 return $('.result').eq(position);
  79         }
  80         function marker_for_result(result){
  81                 return L.marker([result.lat,result.lon], {riseOnHover:true,title:result.name });
  82         }
  83         function circle_for_result(result){
  84                 return L.circleMarker([result.lat,result.lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75});
  85         }
  86
  87         var layerGroup = new L.layerGroup().addTo(map);
  88         function highlight_result(position, bool_focus){
  89                 var result = nominatim_results[position];
  90                 if (!result){ return }
  91                 var result_el = get_result_element(position);
  92
  93                 $('.result').removeClass('highlight');
  94                 result_el.addClass('highlight');
  95
  96                 layerGroup.clearLayers();
  97
  98                 if (result.lat){
  99                         var circle = circle_for_result(result);
 100                         circle.on('click', function(){
 101                                 highlight_result(position);
 102                         });
 103                         layerGroup.addLayer(circle);
 104                 }
 105                 if (result.aBoundingBox){
 106
 107                         var bounds = [[result.aBoundingBox[0]*1,result.aBoundingBox[2]*1], [result.aBoundingBox[1]*1,result.aBoundingBox[3]*1]];
 108                         map.fitBounds(bounds);
 109                         if (result.astext && result.astext.match(/POLY/) ){
 110                                 var layer = omnivore.wkt.parse(result.astext);
 111                                 layerGroup.addLayer(layer);
 112                         }
 113                         else {
 114                                 // var layer = L.rectangle(bounds, {color: "#ff7800", weight: 1} );
 115                                 // layerGroup.addLayer(layer);
 116                         }
 117                 }
 118                 else {
 119                         map.panTo([result.lat,result.lon], result.zoom || nominatim_map_init.zoom);
 120                 }
 121
 122                 // var crosshairIcon = L.icon({
 123                 //      iconUrl:     'images/crosshair.png',
 124                 //      iconSize:    [12, 12],
 125                 //      iconAnchor:  [6, 6],
 126                 // });
 127                 // var crossMarker = new L.Marker([result.lat,result.lon], { icon: crosshairIcon, clickable: false});
 128                 // layerGroup.addLayer(crossMarker);
 129
 130
 131
 132                 if (bool_focus){
 133                         $('#map').focus();
 134                 }
 135         }
 136
 137
 138         $('.result').on('click', function(e){
 139                 highlight_result($(this).data('position'), true);
 140         });
 141
 142         highlight_result(0, false);
 143
 144
 145 });
 146
 147
 148 jQuery(document).on('ready', function(){
 149
 150         if ( !$('#details-page').length ){ return; }
 151
 152
 153                 map = new L.map('map', {
 154                                         // center: [nominatim_map_init.lat, nominatim_map_init.lon],
 155                                         // zoom:   nominatim_map_init.zoom,
 156                                         attributionControl: false,
 157                                         scrollWheelZoom:    false,
 158                                         touchZoom:          false,
 159                                 });
 160
 161                 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 162                         // moved to footer
 163                         // attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 164                 }).addTo(map);
 165
 166                 var layerGroup = new L.layerGroup().addTo(map);
 167
 168                 var circle = L.circleMarker([nominatim_result.lat,nominatim_result.lon], { radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75});
 169                 map.addLayer(circle);
 170
 171                 if ( nominatim_result.outlinestring ){
 172                         var outline = omnivore.wkt.parse(nominatim_result.outlinestring);
 173                         map.addLayer(outline);
 174                         map.fitBounds(outline.getBounds());
 175                 } else {
 176                         map.setView([nominatim_result.lat,nominatim_result.lon],10);
 177                 }
 178
 179
 180
 181 });
 182