Mice and Maps

WOOTConf 2017

@RhianaHeath

http://www.goodreads.com/book/show/4193454-mouse-guard

http://cdn.eslbase.com/wp-content/uploads/2014/09/storytelling.jpg

https://streamcoimg-a.akamaihd.net/000/373/933/6a7b88949db445b4ab7bf84252779904.jpg

http://mythcreants.com/wp-content/uploads/2013/11/mouse-guard.jpg

http://railsinstallfest.org/

https://reinteractive.com/

http://adhelper.biz/wp-content/uploads/2013/08/blog-layout-outaboutcomm-2.jpg

https://rpgfreak.files.wordpress.com/2012/01/mg_map.jpg

http://leafletjs.com/

var map   = L.map('map')
     
map_tiles = 'http://rhiana.github.io/mouse_guard/public/mouse_guard_tiles/{z}/{y}/{x}.png';

L.tileLayer(map_tiles, {
   attribution: 'Jykke ref: http://www.cartographersguild.com/finished-maps/11075-mouse-guard-map-facelift.html',
}).addTo(map)
var map   = L.map('map')
     
map_tiles = 'http://rhiana.github.io/mouse_guard/public/mouse_guard_tiles/{z}/{y}/{x}.png';

L.tileLayer(map_tiles, {
   attribution: 'Jykke ref: http://www.cartographersguild.com/finished-maps/11075-mouse-guard-map-facelift.html',
}).addTo(map)
var map   = L.map('map')
     
map_tiles = 'http://rhiana.github.io/mouse_guard/public/mouse_guard_tiles/{z}/{y}/{x}.png';

L.tileLayer(map_tiles, {
   attribution: 'Jykke ref: http://www.cartographersguild.com/finished-maps/11075-mouse-guard-map-facelift.html',
}).addTo(map)

http://lemberg.github.io/mappwidget/images/image07.png

0, 0

Zoom Level 0

0, 0

0, 1

1, 0

1, 1

Zoom Level 1

Zoom Level 0

Zoom Level 1

Zoom Level 2

var map   = L.map('map')
     
map_tiles = 'http://rhiana.github.io/mouse_guard/public/mouse_guard_tiles/{z}/{y}/{x}.png';

L.tileLayer(map_tiles, {
   attribution: 'Jykke ref: http://www.cartographersguild.com/finished-maps/11075-mouse-guard-map-facelift.html',
   maxZoom: 4,
   minZoom: 2
}).addTo(map)


var map   = L.map('map')
     
map.fitWorld()
map.setMaxBounds(map.getBounds())

http://leafletjs.com/reference-1.0.2.html

Leaflet API

rails generate scaffold MouseGuard 

name:string
lat:decimal
long:decimal
catagory:string
description:text
inhabitants:text
exploits:text
reputation:integer
rails generate scaffold MouseGuard 

name:string
lat:decimal
long:decimal
catagory:string
description:text
inhabitants:text
exploits:text
reputation:integer
map.on("contextmenu", onMapRightClick)

function onMapRightClick(e) {
    L.marker([e.latlng.lat, e.latlng.lng], {icon: redIcon} )
            .addTo(map)

    $(".new_area_form").show()
    $(".area_form").hide()

    $("input#area_lat").val(e.latlng.lat.toFixed(2))
    $("input#area_long").val(e.latlng.lng.toFixed(2))
}
map.on("contextmenu", onMapRightClick)

function onMapRightClick(e) {
    L.marker([e.latlng.lat, e.latlng.lng], {icon: redIcon} )
            .addTo(map)

    $(".new_area_form").show()
    $(".area_form").hide()

    $("input#area_lat").val(e.latlng.lat.toFixed(2))
    $("input#area_long").val(e.latlng.lng.toFixed(2))
}
map.on("contextmenu", onMapRightClick)

function onMapRightClick(e) {
    L.marker([e.latlng.lat, e.latlng.lng], {icon: redIcon} )
            .addTo(map)

    $(".new_area_form").show()
    $(".area_form").hide()

    $("input#area_lat").val(e.latlng.lat.toFixed(2))
    $("input#area_long").val(e.latlng.lng.toFixed(2))
}
map.on("contextmenu", onMapRightClick)

function onMapRightClick(e) {
    L.marker([e.latlng.lat, e.latlng.lng], {icon: redIcon} )
            .addTo(map)

    $(".new_area_form").show()
    $(".area_form").hide()

    $("input#area_lat").val(e.latlng.lat.toFixed(2))
    $("input#area_long").val(e.latlng.lng.toFixed(2))
}
function onMarkerLeftClick(form) {
    return function(){
        $(".area_form").hide()
        $(".new_area_form").hide()
        $(form).show()
    }
}

function showAllMarkers() {
    $(".area_form").hide()

    $(".area_form").each(function(index, form) {

       var lat     = $("input#area_lat", form).val()
       var lng 	   = $("input#area_long", form).val()
       var name    = $("input#area_name", form).val()
       var marker  = L.marker([lat, lng], {icon: orangeIcon})

       marker.addTo(map).bindPopup(name)
       marker.on("click", onMarkerLeftClick(form))
    });
}
function onMarkerLeftClick(form) {
    return function(){
        $(".area_form").hide()
        $(".new_area_form").hide()
        $(form).show()
    }
}

function showAllMarkers() {
    $(".area_form").hide()

    $(".area_form").each(function(index, form) {

       var lat     = $("input#area_lat", form).val()
       var lng 	   = $("input#area_long", form).val()
       var name    = $("input#area_name", form).val()
       var marker  = L.marker([lat, lng], {icon: orangeIcon})

       marker.addTo(map).bindPopup(name)
       marker.on("click", onMarkerLeftClick(form))
    });
}
function onMarkerLeftClick(form) {
    return function(){
        $(".area_form").hide()
        $(".new_area_form").hide()
        $(form).show()
    }
}

function showAllMarkers() {
    $(".area_form").hide()

    $(".area_form").each(function(index, form) {

       var lat     = $("input#area_lat", form).val()
       var lng 	   = $("input#area_long", form).val()
       var name    = $("input#area_name", form).val()
       var marker  = L.marker([lat, lng], {icon: orangeIcon})

       marker.addTo(map).bindPopup(name)
       marker.on("click", onMarkerLeftClick(form))
    });
}

Demo Time!

WELLINGTON ROOM 1

Games and FOSS

Demo from Mice and Maps

Today at 4:30pm

References

  1. LeafletJs.com
  2. RailsInstallfest.org
  3. Reinteractive.com
  4. MouseGuard.net

Rhiana Heath

  1. mouseguard.heath.cc
  2. rhiana.heath.cc
  3. github.com/Rhiana/mouse_guard
  4. slides.com/rhianaheath/

@RhianaHeath

Mouse and Maps

By RhianaH

Made with Slides.com

Mouse and Maps

Detailed look into how and why I made MouseGuard maps. A website app for tracking a role playing game

  • 3,008

More from RhianaH