Jump To …

geonamesmapplugin.coffee

src/plugins/
class window.GeoNamesMapPlugin extends window.LimePlugin
  init: ->
    @name = 'GeoNamesMapPlugin'
    annotation = undefined
    console.info "Initialize GeoNamesMapPlugin"

    for annotation in @lime.annotations
      relevant = false
      relevant = annotation.resource.value.indexOf("sws.geonames.org") > 0 or (annotation.hash.latitude and annotation.hash.latitude)
      unless annotation.relation.value in ['http://connectme.at/ontology#explicitlyShows', 'http://connectme.at/ontology#explicitlyMentions', 'http://connectme.at/ontology#implicitlyShows' , 'http://connectme.at/ontology#implicitlyMentions'] # is "http://connectme.at/ontology#hasKeyword"
        relevant = false
      if relevant
        @handleAnnotation annotation

Putting this into a function keeps the annotation in the context

  handleAnnotation: (annotation) ->

console.info "The annotation #{annotation.resource} looks interesting, get the whole entity so we can show it in a widget!", annotation

    annotation.entityPromise.done =>

console.info "entities for annotation #{annotation.resource} loaded, create a widget for it!", annotation

      widget = @lime.allocateWidgetSpace @,
        thumbnail: "img/mapIcon.png" # should go into CSS
        title: "#{annotation.getLabel()} Map"
        type: "GeoNamesMapWidget"
        sortBy: ->
          10000 * annotation.start + annotation.end

We're going to need the annotation for the widget's activate event

      widget.annotation = annotation

widget was activated, we show details now

      jQuery(widget).bind 'activate', (e) =>
        try
          eventClickedLabel = e.target.options.title
          eventCategory = @name
          _gaq.push ['_trackEvent',eventCategory, 'clicked',eventClickedLabel]
        catch error
        @showInModalWindow annotation, @getModalContainer()

Hang the widget on the annotation

      annotation.widgets[@name] = widget

      jQuery(annotation).bind "becomeActive", (e) =>

attached gogle analytics stack push for active annotation

        try
          eventActiveLabel = e.target.widgets[@name].options.title
          eventCategory = @name
          _gaq.push ['_trackEvent',eventCategory,'becameActive',eventActiveLabel]
        catch error
        annotation.widgets[@name].setActive()

      jQuery(annotation).bind "becomeInactive", (e) =>

attached gogle analytics stack push for inactive annotation

        try
          eventActiveLabel = e.target.widgets[@name].options.title
          eventCategory = @name
          _gaq.push ['_trackEvent',eventCategory,'becomeInactive',eventActiveLabel]
        catch error
        annotation.widgets[@name].setInactive()


      jQuery(widget).bind "leftarrow", (e) =>

@geotabsiterator += 1

        @geotabsiterator = if @geotabs.length is @geotabsiterator + 1 then 0 else @geotabsiterator + 1

jQuery('.geotab.selected').removeClass 'selected'

        if (@geotabsiterator == 0)
          jQuery("#geoMap").trigger 'click'

jQuery("#geoMap").addClass 'selected'

        if (@geotabsiterator == 1)
          jQuery("#geoWeather").trigger 'click'

        if (@geotabsiterator == 2)
          jQuery("#geoRout").trigger 'click'

jQuery("#geoRout").addClass 'selected'

        if (@geotabsiterator == 3)
          jQuery("#geoPanoramio").trigger 'click'

jQuery("#geoPanoramio").addClass 'selected'

      jQuery(widget).bind "rightarrow", (e) =>

@geotabsiterator += 1

        @geotabsiterator = if @geotabsiterator is 0 then @geotabs.length - 1  else @geotabsiterator - 1

jQuery('.geotab.selected').removeClass 'selected'

        if (@geotabsiterator == 0)
          jQuery("#geoMap").trigger 'click'

jQuery("#geoMap").addClass 'selected'

        if (@geotabsiterator == 1)
          jQuery("#geoWeather").trigger 'click'

jQuery("#geoWeather").addClass 'selected'

        if (@geotabsiterator == 2)
          jQuery("#geoRout").trigger 'click'

jQuery("#geoRout").addClass 'selected'

        if (@geotabsiterator == 3)
          jQuery("#geoPanoramio").trigger 'click'

jQuery("#geoPanoramio").addClass 'selected'

      jQuery(widget).bind "uparrow", (e) =>

customEvent = jQuery.Event "keydown" customEvent.which = 107 # + key code value

jQuery("#geoMap").trigger 'click'
jQuery("#map_area").trigger customEvent


        currentZoom = @geomap.getZoom()
        @geomap.setZoom currentZoom + 1

      jQuery(widget).bind "downarrow", (e) =>
        currentZoom = @geomap.getZoom()
        @geomap.setZoom currentZoom - 1


  showInModalWindow: (annotation, outputElement) ->
    modalContent = undefined
    result = undefined
    language = UTILS.getParameterByName("lang")
    startTime = new Date().getTime()
fix container size


    modalContent = jQuery(outputElement)
    modalContent.css "width", "600px"

    modalContent.css "height", "500px"
render widget


    if language.indexOf("en") >= 0
result = "
\n 
\n   
\n  
\n   
\n   
\n
\n   
   
\n   
\n 
\n 
\n 
\n
\n
\n
\n
\n 
\n "


      result = """
               <div id="ifoWidgetExpanded" style="border: 1px dotted lightgray; position: absolute; top: 0; z-index: 100; width: 600px; right: 0; height: 100%;">
               <div id="map_area" style="left: 0px; top: 0px; width: 600px; height: 100%; position: relative;"></div>
               <div id="mapMenu" style="position: absolute; z-index: 900; width: auto; right: 1px; bottom: 0px; height: 41px;">
               <div id="geoMap" class="geotab" style="position: relative; background-position: center center; background-image: url('img/mapIcon.png'); background-size: contain; float: right; height: 40px; width: 86px;"></div>
               <div id="geoWeather" class="geotab" style="position: relative; background-position: center center; background-image: url('img/weather.png'); background-size: contain; float: right; width: 86px; height: 40px;"></div>
               <div id="geoRout" class="geotab" style="background-position: center center; background-size: contain; background-image: url('img/directionIcon.png'); float: right; width: 86px; height: 40px;"></div>
               <div id="geoPanoramio" class="geotab disabled" style="display: none; background-position: center center; background-size: contain; background-image: url('img/directionIcon.png'); float: right; width: 86px; height: 40px;"></div>
               </div>
              <!-- <div id="closingButton" style="position: absolute; z-index: 900; width: 87px; height: 38px; background-color: #414040; left: 513px; top: 408px;"><span data-dojo-type="shapes.Text" style="font-size: 14px; position: absolute; z-index: 900; color: #ffffff; left: 41px; top: 8.5px;">X</span></div> -->
               </div>
               """
    else
result = "
\n 
\n   
\n  
\n   
\n   
\n
\n   
   
\n   
\n 
\n 
\n 
\n
\n
\n
\n
\n 
\n "  if language.indexOf("de") >= 0


      result = """
               <div id="ifoWidgetExpanded" style="border: 1px dotted lightgray; position: absolute; top: 0; z-index: 100; width: 600px; right: 0; height: 80%;">
               <div id="map_area" style="left: 0px; top: 0px; width: 600px; height: 100%; position: relative;"></div>
               <div id="mapMenu" style="position: absolute; z-index: 900; width: auto; right: 1px; bottom: 0px; height: 41px;">
               <div id="geoMap" class="geotab" style="position: relative; background-position: center center; background-image: url('img/mapIcon.png'); background-size: contain; float: right; height: 40px; width: 86px;"></div>
               <div id="geoWeather" class="geotab" style="position: relative; background-position: center center; background-image: url('img/weather.png'); background-size: contain; float: right; width: 86px; height: 40px;"></div>
               <div id="geoRout" class="geotab" style="background-position: center center; background-size: contain; background-image: url('img/directionIcon.png'); float: right; width: 86px; height: 40px;"></div>
               <div id="geoPanoramio" class="geotab disabled" style="display: none; background-position: center center; background-size: contain; background-image: url('img/directionIcon.png'); float: right; width: 86px; height: 40px;"></div>
               </div>
               <!-- <div id="closingButton" style="position: absolute; z-index: 900; width: 87px; height: 38px; background-color: #414040; left: 513px; top: 408px;"><span data-dojo-type="shapes.Text" style="font-size: 14px; position: absolute; z-index: 900; color: #ffffff; left: 41px; top: 8.5px;">X</span></div> -->
               </div>
               """
    modalContent.append result
    @geotabs = jQuery('.geotab:not(.disabled)')
    @geotabsiterator = 0
control widget


    jQuery(".close").click (e) =>
      endTime = new Date().getTime()
      timeSpent = endTime - startTime
      eventLabel = annotation.widgets[@name].options.title
      try
        _gaq.push ['_trackEvent', @name, 'viewed', eventLabel, timeSpent]
        _gaq.push ['_trackTiming', @name, eventLabel, timeSpent, 'viewed']
      catch error

    jQuery('#mask').click (e) =>
      endTime = new Date().getTime()
      timeSpent = endTime - startTime
      eventLabel = annotation.widgets[@name].options.title
      try
        _gaq.push ['_trackEvent', @name, 'viewed', eventLabel, timeSpent]
        _gaq.push ['_trackTiming', @name, eventLabel, timeSpent, 'viewed']
      catch error

    jQuery("#geoMap").click =>
      jQuery('.geotab.selected').removeClass 'selected'
menu handling


      jQuery("#location_bar").css "visibility", "visible"
      jQuery("#weather_bar").css "visibility", "hidden"
      jQuery("#rout_bar").css "visibility", "hidden"
      jQuery("#map_area").empty()
cartography handling


      i = undefined
      latitude = undefined
      latlng = undefined
      locationName = undefined
      longitude = undefined
      map = undefined
      myOptions = undefined
      output = undefined
      x = undefined
      xmlDoc = undefined
      xmlhttp = undefined
#


      try
        if window.XMLHttpRequest
          xmlhttp = new XMLHttpRequest()
        else
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
        xmlhttp.open "POST", annotation.resource.value + "/about.rdf", false
        xmlhttp.send()
        xmlDoc = xmlhttp.responseXML
        x = xmlDoc.getElementsByTagName("Feature")
        i = 0
        while i < x.length
          locationName = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
          latitude = x[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue
          longitude = x[i].getElementsByTagName("long")[0].childNodes[0].nodeValue
          i++
        output = document.getElementById("map_area")
        latlng = new google.maps.LatLng(latitude, longitude)
        myOptions =
          zoom: 13
          center: latlng
          mapTypeId: google.maps.MapTypeId.ROADMAP

        map = new google.maps.Map(output, myOptions)
        @geomap = map
        console.info @geomap
google.maps.event.addListener(output, 'keydown', console.info 'map catched the keydown event');


#


      locationName = annotation.getLabel()
      latitude = annotation.getLatitude()
      longitude = annotation.getLongitude()

      output = document.getElementById("map_area")
      latlng = new google.maps.LatLng(latitude, longitude)
      myOptions =
        zoom: 13
        center: latlng
        mapTypeId: google.maps.MapTypeId.ROADMAP

      map = new google.maps.Map(output, myOptions)
      @geomap = map


      jQuery("#geoMap").addClass 'selected'

    jQuery("#geoWeather").click =>
      jQuery('.geotab.selected').removeClass 'selected'
menu handling


      jQuery("#location_bar").css "visibility", "hidden"
      jQuery("#weather_bar").css "visibility", "visible"
      jQuery("#rout_bar").css "visibility", "hidden"
      jQuery("#map_area").empty()
cartography handling


      i = undefined
      latitude = undefined
      latlng = undefined
      locationName = undefined
      longitude = undefined
      map = undefined
      myOptions = undefined
      output = undefined
      weatherLayer = undefined
      x = undefined
      xmlDoc = undefined
      xmlhttp = undefined
#


      try
        if window.XMLHttpRequest
          xmlhttp = new XMLHttpRequest()
        else
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
        xmlhttp.open "POST", annotation.resource.value + "/about.rdf", false
        xmlhttp.send()
        xmlDoc = xmlhttp.responseXML
        x = xmlDoc.getElementsByTagName("Feature")
        i = 0
        while i < x.length
          locationName = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
          latitude = x[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue
          longitude = x[i].getElementsByTagName("long")[0].childNodes[0].nodeValue
          i++
#


      locationName = annotation.getLabel()
      latitude = annotation.getLatitude()
      longitude = annotation.getLongitude()

      output = document.getElementById("map_area")
      latlng = new google.maps.LatLng(latitude, longitude)
      myOptions =
        zoom: 11
        center: latlng
        mapTypeId: google.maps.MapTypeId.ROADMAP

      map = new google.maps.Map(output, myOptions)
      weatherLayer = new google.maps.weather.WeatherLayer(temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS)
      weatherLayer.setMap map
      @geomap = map
      jQuery("#geoWeather").addClass 'selected'

    jQuery("#geoRout").click =>
      jQuery('.geotab.selected').removeClass 'selected'
menu handling


      jQuery("#location_bar").css "visibility", "hidden"
      jQuery("#weather_bar").css "visibility", "hidden"
      jQuery("#rout_bar").css "visibility", "visible"
      jQuery("#map_area").empty()
cartography handling


      if navigator.geolocation
        navigator.geolocation.getCurrentPosition ((position) ->
          i = undefined
          latitude = undefined
          locationName = undefined
          longitude = undefined
          map = undefined
          myOptions = undefined
          output = undefined
          x = undefined
          xmlDoc = undefined
          xmlhttp = undefined
          start = undefined
          destination = undefined
          directionDisplay = undefined
          directionsService = new google.maps.DirectionsService()
#


          try
            if window.XMLHttpRequest
              xmlhttp = new XMLHttpRequest()
            else
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
            xmlhttp.open "POST", annotation.resource.value + "/about.rdf", false
            xmlhttp.send()
            xmlDoc = xmlhttp.responseXML
            x = xmlDoc.getElementsByTagName("Feature")
            i = 0
            while i < x.length
              locationName = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
              latitude = x[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue
              longitude = x[i].getElementsByTagName("long")[0].childNodes[0].nodeValue
              i++
#


          locationName = annotation.getLabel()
          latitude = annotation.getLatitude()
          longitude = annotation.getLongitude()

          output = document.getElementById("map_area")
          directionsDisplay = new google.maps.DirectionsRenderer()
          destination = new google.maps.LatLng(latitude, longitude)
          mapOptions =
            zoom: 7
            mapTypeId: google.maps.MapTypeId.ROADMAP
            center: destination

          map = new google.maps.Map(output, mapOptions)
          start = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
set direction map
alert(start);


          directionsDisplay.setMap map
          @geomap = map
          request =
            origin: start
            destination: destination
            travelMode: google.maps.TravelMode.DRIVING

          directionsService.route request, (result, status) ->
            directionsDisplay.setDirections result  if status is google.maps.DirectionsStatus.OK
next function is the error callback


        ),
        (error) ->
          switch error.code
            when error.TIMEOUT
              alert "Timeout"
            when error.POSITION_UNAVAILABLE
              alert "Position unavailable"
            when error.PERMISSION_DENIED
              alert "Permission denied"
            when error.UNKNOWN_ERROR
              alert "Unknown error"
      jQuery("#geoRout").addClass 'selected'

    jQuery("#geoPanoramio").click =>
      jQuery('.geotab.selected').removeClass 'selected'
      jQuery("#geoPanoramio").addClass 'selected'
default selection


    jQuery("#geoMap").trigger "click"
    jQuery("#geoMap").addClass 'selected'
    return;


LIME - Linked Media Player