English فارسی Suomi
Français Nederlands Translate
EDIT

Newscoop 3 Cookbook

[view all chapters]

Displaying a map

Note: this works only in Newscoop 3.5.0 and later versions.

Maps require jQuery: In order to use display maps you must include jQuery in the header of your document, with a link like this: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

Purpose:

"map" prints a geolocation map and the list of locations. The article containing the map must have been previously initialized, otherwise this function will display nothing.

Syntax: 

{{ map [width="<width_value>"]
       [height="<height_value>" ]
       [show_locations_list="<boolean_value>" ]
       [show_reset_link="<string_value>|<boolean_value>" ] }}

Filters:

  • width: <width_value> Width size for the Map frame to be displayed
  • height: <height_value> Height size for the Map frame to be displayed
  • show_locations_list: <boolean_value> Whether the list of map locations is displayed or not. Default value FALSE
  • show_reset_link: <string value> | <boolean value> Whether the link to reset the Map to the initial view is displayed or not. Default value TRUE. If a string is provided instead of TRUE or true, then the string will be used as the link text instead of the default text.

Styling the Map view

Below you can see an example of the code generated by Newscoop to display a Map. You can style the way it looks like by defining CSS styles for the classes. 

 <!-- Map Container START //-->
<div class="geomap_container">
  <!-- Map general info and
locations Container START //-->
  <div class="geomap_locations">
    <!-- Map General Info (Title)
START //-->
    <div class="geomap_info">
      <dl class="geomap_map_name">
        <dt
class="geomap_map_name_label">Map:</dt>
        <dd
class="geomap_map_name_value">My Map</dd>
      </dl>
    </div>
    <!-- Map General Info (Title)
END //-->
    <!-- Map Locations List START
//-->
    <div id="side_info"
class="geo_side_info">
      <!-- Map Location Nr. 1 START
//-->
      <div id="poi_seq_0">
        <a class="geomap_poi_name"
href="#"
onClick="geo_hook_on_map_feature_select(geo_object_61_1, 0);
return false;">POI no. 1</a>
        <div
class="geomap_poi_perex"></div>
        <div
class="geomap_poi_center">
          <a href="#"
onClick="geo_object_61_1.center_lonlat(14.753722843736,
48.948841006863); return false;">Center</a>
        </div>
        <div
class="geomap_poi_spacer">&nbsp;</div>
      </div>
      <!-- Map Location Nr. 1 END
//-->
      <!-- Map Location Nr. 2 START
//-->
      <div id="poi_seq_1">
        <a class="geomap_poi_name"
href="#"
onClick="geo_hook_on_map_feature_select(geo_object_61_1, 1);
return false;">POI Name</a>
        <div
class="geomap_poi_perex">Any text</div>
        <div
class="geomap_poi_center">          <a href="#"
onClick="geo_object_61_1.center_lonlat(1.240539250526,
47.067502513872); return false;">Center</a>
        </div>
        <div
class="geomap_poi_spacer">&nbsp;</div>
      </div>
      <!-- Map Location Nr. 2 END
//-->
    </div>
    <!-- Map Locations List END
//-->
  </div>
  <!-- Map general info and
locations Container START //-->
  <!-- Map Menu (Show Reset Link)
START //-->
  <div class="geomap_menu">
    <a href="#"
onClick="geo_object_61_1.map_showview(); return false;">Gimme
my map</a>
  </div>
  <!-- Map Menu (Show Reset Link)
END //-->
  <!-- Map Render Area START //-->
  <div class="geomap_map">
    <div
id="geo_map_mapcanvas_61_1"></div>
  </div>
  <!-- Map Render Area END //-->
</div>
<div style="clear:both"
></div>

Sourcefabric provides some styling definitions as part of the sample templates.

EDIT