Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

How to use it by thebest11

VIEWS: 0 PAGES: 11

									How to use it
 Let's take this simple and representative example: setting up an
 application composed of a single web page featuring
   ✔   A map representing the Africa and its countries
   ✔   A searcher highlighting the country under the mouse and displaying a popup
       with information on that country
 Six steps
   ✔ Create a MapFish project
   ✔ Create a web page with an Ext viewport
   ✔ Add a Map Component to the viewport
   ✔ Create a MapFish layer
   ✔ Add a Searcher Component
Step #1: Create a MapFish project
 paster create --template=mapfish MyMapFishProject
 This command creates your project tree
   ✔   A Pylons project with a MapFish flavor

MyMapFishProject/
   layers.ini
   development.ini
   setup.py
   docs/
   mymapfishproject/
       config/
       controllers/
       lib/
       model/
       public/
       templates/
       tests/
Step #2: Create a web page with an Ext viewport
 Add a web page to your project's public/ directory with this content:

<html>
<head>
  <title>Title</title>
  <script type=”text/javascript” src=”ext­all.js”></script>
  <script type=”text/javascript” src=”MapFish.js”></script>
  <script type="text/javascript">
  Ext.onReady(function() {
      var viewport = new Ext.Viewport({
          layout: “border”,
          items: [
              {region: “west”, title: “tools”, width: 200},
              {region: “center”, title: “map”}
          ]
      });
  </script>
</head>
</html>
Result of Step #2
Step #3: Add a Map Component to the Viewport
<html>
<head>
  <title>Title</title>
  <script type=”text/javascript” src=”ext­all.js”></script>
  <script type=”text/javascript” src=”MapFish.js”></script>
  <script type="text/javascript">
  Ext.onReady(function() {
      var map = OpenLayers.Map(“map”);
      ...
      var viewport = new Ext.Viewport({
          layout: “border”,
          items: [
              {region: “west”, title: “tools”, width: 200},
              {region: “center”, title: “map”, xtype: “mapcomponent”, map: map}
          ]
      });
  </script>
</head>
<div id=”map”></div>
</html>
Result of Step #3
Step #4: Create a MapFish layer
 Add layer definition to layers.ini
[countries]
singular=country
plural=countries
db=geostat
table=world_factbk
epsg=4326
geomcolumn=simplify



 paster mf-layer countries
 This commands generates the controller and model code
Result of Step #4
MyMapFishProject/
   ...
   mymapfishproject/
       controllers/
          countries.py
       model/
           countries.py
       ...


 The controller includes code that handles HTTP requests
 The model includes code that interacts with the database
 http://host.domain/countries gives a GeoJSON FeatureCollection
 representation of the Africa countries
{"type": "FeatureCollection", "features": [{"geometry": {"type": 
  "MultiPolygon", "coordinates": [[[[­16.505771637, 16.0621852875], ... , 
  [­16.505771637, 16.0621852875]]]]}, "type": "Feature", "properties": 
  {"country": "Mauritania", "death_rt": 12.16, "birth_rt": 40.99, "fertility": 
  5.86}, "id": 27264}, ...]}
Step #5: Add a Searcher Component
 Create Searcher and add it to the map
  Ext.onReady(function() {
      var map = OpenLayers.Map(“map”);
      ...
      var viewport = new Ext.Viewport({
          ...
      });
      var mediator = new mapfish.SearchMediator({
          protocol: new mapfish.Protocol.MapFish({
              url: mapfish.SERVER_BASE_URL + 'summits',
              params: {maxfeatures: 10}})
      });
      var searcher = new mapfish.Searcher.Map({
          mode: mapfish.Searcher.Map.HOVER,
          mediator: mediator,
          displayDefaultPopup: true
      });
      map.addControl(searcher);
      searcher.activate();
});
Result of Step #5
MapFish Protocol
 Protocol for creating/reading/updating/deleting features
 RESTFul
 Specified here
    https://trac.mapfish.org/trac/mapfish/wiki/MapFishProtocol
 Interface borrowed from FeatureServer (credits to Christopher
 Schmidt)
  http://featureserver.org/
 The interface:
  ✔   Create through POST
  ✔   Read through GET
       • standardized filter params: lon, lat, tolerance, box, etc.
  ✔   Update through PUT or POST
  ✔   Delete through DELETE

								
To top