AGIC 2014 - Online GIS Mapping Without GIS Servers

Transcript

1. @cageyjames @tooshel
   AGIC 2014
   ONLINE GIS MAPPING WITHOUT GIS SERVERS
   

   View Slide

2. WHO DIS?
   James Fee
   Business Development
   Web Developer
   Golfer
   PHXGeo Founder
   

   View Slide

3. WHO DAT OVER THERE?
   Sheldon McGee
   Web Developer
   Build in the physical world with wood
   Arduino and Pi are cool
   AFOL
   GDG Organizer
   

   View Slide

4. WHY NO GIS SERVERS?
   They are slow
   They are can be expensive to license
   They require you to use .NET, Java, C++
   They are middleware
   Not the future
   

   View Slide

5. PICTURE A NORMAL GIS TYPE OF DAY...
   

   View Slide

6. View Slide

7. EMAIL ARRIVES:
   Dear GIS Guy,
   I want to put data on a map and share it with
   people. I need this done immediately and it must
   look like the Google Maps.
   Dan the Engineer
   

   View Slide

8. View Slide

9. SETTING UP A GIS SERVER IS A HUGE PAIN IN
   THE REAR!
   

   View Slide

10. STEPS TO GET GIS SERVER RUNNING
    1. Find setup disks or download from web
    2. Check with IT guy to see if server is available
    3. Install prerequisites such as TomCat
    4. Apply patches
    5. Try and get administration settings to work
    6. Attempt to add data sources for maps
    7. Realize you forgot to do step 4 above
    8. Then...
    

    View Slide

11. DAN THE ENGINEER COMES KNOCKING...
    

    View Slide

12. View Slide

13. SO WHAT CHOICES DO WE HAVE?
    

    View Slide

14. TILING
    TileMill + MBTiles
    GeoServer and GeoWebCache
    Esri ArcGIS
    Mapnik (for those who roll their own)
    Google/OSM/etc
    

    View Slide

15. BUT JAMES...
    TILING ONLY WORKS FOR DATA THAT DOESN'T CHANGE.
    

    View Slide

16. THAT'S WHAT DATABASES ARE FOR!
    SO LET'S USE A SPATIAL DB TO SERVE UP THE DATA!
    

    View Slide

17. GEOJSON
    GEOJSON IS A FORMAT FOR ENCODING A VARIETY OF
    GEOGRAPHIC DATA STRUCTURES.
    {
    "type": "Feature",
    "geometry": {
    "type": "Point",
    "coordinates": [‐112.46, 34.54]
    },
    "properties": {
    "name": "Prescott, Arizona"
    }
    }
    

    View Slide

18. HERE'S THE PLAN
    

    View Slide

19. THE TECH
    Node.js
    PostGIS
    Some JS mapping library
    

    View Slide

20. View Slide

21. POSTGIS
    

    View Slide

22. GOOGLE MAPS
    

    View Slide

23. Time to get serious
    

    View Slide

24. LOADING DATA INTO
    POSTGIS
    // Make your database PostGIS Aware
    psql ‐U username ‐d mygisdb
    CREATE EXTENSION POSTGIS;
    // Use magic, free, cross‐platform tool to export shape to sql
    shp2pgsql ‐s 4326 AZBoundary.shp AZBoundary > sql/AZBoundary.sql
    // import that into our database
    psql ‐h localhost ‐d mygisdb ‐U postgres ‐f sql/AZBoundary.sql
    // pull data out as GeOjSoN
    SELECT ST_AsGeoJson(ST_Transform(b.geom,4326)) as geojson
    

    View Slide

25. SETTING UP NODE.JS
    // Don't need the latest but most people install from source on Linux
    wget ‐N http://nodejs.org/dist/node‐latest.tar.gz
    tar xzvf node‐latest.tar.gz && cd node‐v*
    // On Red Hat/Cent/Fedora? Use epel
    yum install http://dl.fedoraproject.org/pub/epel/6/x86_64/epel‐release‐6‐8.noarch.rpm
    yum install nodejs npm ‐‐enablerepo=epel
    

    View Slide

26. NO! NOT THAT KIND OF SETUP!
    SETTING UP NODE.JS
    //get the repo . . . maybe put it in /var/www?
    git clone https://github.com/tooshel/node‐gis‐server
    //install dependancies . . . there are only two
    npm install
    

    View Slide

27. NODE.JS
    Line by line!
    var pg = require('pg');
    var geojson = require('../helpers/geojson');
    var jsonp = require('../helpers/jsonp');
    var settings = require('../settings');
    module.exports.controller = function(app) {
    /* enable CORS */
    app.all('*', function(req, res, next) {
    res.header('Access‐Control‐Allow‐Origin', '*');
    res.header('Access‐Control‐Allow‐Headers', 'X‐Requested‐With');
    next();
    });
    app.get('/vector/:schema/:table/:geom/intersect', function(req, res, next) {
    var queryshape = ' {"type": "Point", "coordinates": [' + req.query['lng'] + ',' + req.query[
    var geom = req.params.geom.toLowerCase();
    if ((geom != 'features') && (geom != 'geometry') && (geom != 'all')) {
    

    View Slide

28. HOSTING THE APPLICATION
    //Install pm2 (globally)
    npm install ‐g pm2
    //use pm2 to start the server, it's listening on port 3000
    pm2 start server.js
    //you should probably put it all behind nginx and proxy to 3000
    //but in this case just used some iptables magic
    iptables ‐t nat ‐A PREROUTING ‐i eth0 ‐p tcp ‐‐dport 80 ‐j REDIRECT ‐‐to‐port 3000
    

    View Slide

29. USING GEOJSON WITH GOOGLE MAPS:
    Google Maps Javascript API v3 Data Layer
    map.data.loadGeoJson('http://localhost/prescott.json');
    

    View Slide

30. LEAFLET TOO!
    L.geoJson(geojsonFeature).addTo(map);
    AND OPENLAYERS . . .
    var vectorSource = new ol.source.GeoJSON(.........
    .loadGeoJson, .geoJson, .GeoJSON . . .
    WE ARE ALL INDEPENDENT THINKERS
    

    View Slide

31. View Slide

32. GIS WITHOUT GIS
    SERVERS!
    Cheap Hosting
    PostGIS goodness
    JavaScript simplicity
    Load GIS data on Google Maps
    

    View Slide

33. THE DEMO
    GIS IN GOOGLE MAPS
    GIS IN GOOGLE MAPS (LOCAL)
    

    View Slide

34. CONS?
    More DOM elements . . . can be slow . . . but not forever
    Mobile?
    

    View Slide

35. View Slide

36. which was a fork of
    which was a fork of
    FORK IT ON GITHUB
    https://github.com/tooshel/node-gis-server/
    https://github.com/ManoMarks/node-gis-server/
    https://github.com/geobabbler/node-gis-server/
    SHARING IS CARING
    

    View Slide

37. END
    QUESTIONS?
    Or if you are shy catch us on twitter:
    @cageyjames
    @tooshel
    

    View Slide