Project

General

Profile

Feature #426

Map features

Added by Alexander Watzinger over 6 years ago. Updated over 6 years ago.

Status:
Closed
Priority:
Low
Category:
Backend
Target version:
Start date:
2015-05-28
Estimated time:
8.00 h

Description

- show existing entries
- show map more often (see #423)
- geosearch

Preparations:

- data format example for existing map entries

History

#1

Updated by Alexander Watzinger over 6 years ago

  • Description updated (diff)
  • Assignee changed from Alexander Watzinger to Stefan Eichert

@ Stefan, please reasign to me after data format example for existing map entries

#2

Updated by Stefan Eichert over 6 years ago

  • Assignee changed from Stefan Eichert to Alexander Watzinger

Example geojson:


  {
    "type": "Feature",
    "geometry": 
      {
      "type": "Point",
      "coordinates": [17.45,48.87]
      },
    "properties": 
      {
      "title": "Name of site 3", 
      "description": "here the description of the site 1", 
      "marker-color": "#fc4353", 
      "sitetype": "Settlement > City",
      "uid": "12345" 
      }
  }

In the map javascript:


//function that sets the popup content when the marker is loaded

function setSitesInfo(e) {
                var marker = e.layer,
                        feature = marker.feature;
                        marker.bindPopup(
                        '<b>' + marker.toGeoJSON().properties.title + '</b> <br>' +
                        '<i>' + marker.toGeoJSON().properties.sitetype + '</i> <br> <br>' +
                        '<div style="max-height:140px; overflow-y: auto">' + marker.toGeoJSON().properties.description + '<br> </div>'
                        );
            }

//geojson as variable to be transformed to a map layer (here with 4 example sites). See comments on the values to be retrieved from db

var sitesjson = [ //sample sites. To be pulled from the database via a query and put into the following format:
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [17.45, 48.87] //insert xy values from database here
        },
        "properties": {
            "title": "Name of site 1", //insert name from the database here
            "description": "here the description of the site 1", //insert description from the database here
            "marker-color": "#fc4353", //here it would be nice if a different color value could be generated by the top type categories for sites
            "sitetype": "Settlement > City",
        "uid": "1" //get string from database
        }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [17.885, 47.78] //insert xy values from database here
        },
        "properties": {
            "title": "Name of site 2", //insert name from the database here
            "description": "here the description of the site 2", //insert description from the database here
            "marker-color": "#fc4353", //here it would be nice if a different color value could be generated by the top type categories for sites
            "sitetype": "Settlement > Village",
        "uid": "2"//get string from database
        }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [15, 46.87] //insert xy values from database here
        },
        "properties": {
            "title": "Name of site 3", //insert name from the database here
            "description": "here the description of the site 3", //insert description from the database here
            "marker-color": "#fc4353", //here it would be nice if a different color value could be generated by the top type categories for sites
            "sitetype": "Burial Site > Cemetery > Inhumation Cemetery", //get string from database
            "uid": "3" 

    }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [16.3721557062617, 48.5592242288185] //insert xy values from database here
        },
        "properties": {
            "title": "aaa Oberleiserberg Gräberfeld", //insert name from the database here
            "description": "here the description of the site 4", //insert description from the database here
            "marker-color": "#fc4353", //here it would be nice if a different color value could be generated by the top type categories for sites
            "sitetype": "Burial Site > Cemetery > Inhumation Cemetery", //get string from database
            "uid": "32267" 

    }
    }
];

var sitesmarkers = L.mapbox.featureLayer(); // define a layer for sitedata

sitesmarkers.on('layeradd', setSitesInfo); //triggers set pop-up content 

sitesmarkers.setGeoJSON(sitesjson); //set layer content to geojson

map.addLayer(sitesmarkers); //add layer           
map.fitBounds(sitesmarkers); //set map bounds to layer extend

#3

Updated by Alexander Watzinger over 6 years ago

  • Description updated (diff)
#4

Updated by Stefan Eichert over 6 years ago

Added markers from existing geojson with fit to bounds on start
Added geosearch via Leaflet.Geonames ( https://github.com/consbio/Leaflet.Geonames ) and modified it show pulsating marker (leaflet.usermarker.js)
pushed new modifications to bitbucket.

Added search for existing sites via jquery autocomplete from json that contains a list of sites with type and lat lon values. pushed to bitbucket

(see dpp - server place insert for demo)
todo: 1. some tweaks with the css (e.g. the jquery autocomplete looks strange. Also the popup formatting is ignored)
2. Get the json and geojson automatically from the backend

Included Auto enable/disable dragging on hover

#5

Updated by Alexander Watzinger over 6 years ago

  • Project changed from 19 to OpenAtlas
  • Category deleted (39)
  • Target version deleted (38)
#6

Updated by Alexander Watzinger over 6 years ago

  • Category set to Backend
  • Target version set to 0.8.0
#7

Updated by Alexander Watzinger over 6 years ago

  • Status changed from Assigned to Closed

Also available in: Atom PDF