diff --git a/resources/public/css/style.css b/resources/public/css/style.css index 4beb199..477d43f 100644 --- a/resources/public/css/style.css +++ b/resources/public/css/style.css @@ -64,6 +64,12 @@ samp { padding-left: 10%; } +.geocsv { + height: 600px; + width: 80%; + border: thin solid gray; +} + .leaflet-popup-content h5 { width: 80%; } diff --git a/resources/public/index.html b/resources/public/index.html index 48d4385..5661e3d 100644 --- a/resources/public/index.html +++ b/resources/public/index.html @@ -23,14 +23,85 @@ crossorigin=""/ -->

+

+ Map using data from element content +

+

+ To make this work, you need a <pre> tag wrapping + the data. View source of this page to see this work. +

+
+ 
+        Country,Name,Latitude,Longitude,CountryCode,Continent
+        Saint Martin,Marigot,18.0731,-63.082200,MF,North America
+        American Samoa,Pago Pago,-14.266666666666667,-170.700000,AS,Australia
+        Anguilla,The Valley,18.216666666666665,-63.050000,AI,North America
+        Antigua and Barbuda,Saint John's,17.116666666666667,-61.850000,AG,North America
+        Argentina,Buenos Aires,-34.583333333333336,-58.666667,AR,South America
+        Aruba,Oranjestad,12.516666666666667,-70.033333,AW,North America
+        Bahamas,Nassau,25.083333333333332,-77.350000,BS,North America
+        Barbados,Bridgetown,13.1,-59.616667,BB,North America
+        Belize,Belmopan,17.25,-88.766667,BZ,Central America
+        Bermuda,Hamilton,32.28333333333333,-64.783333,BM,North America
+        Bolivia,La Paz,-16.5,-68.150000,BO,South America
+        Brazil,Brasilia,-15.783333333333333,-47.916667,BR,South America
+        British Virgin Islands,Road Town,18.416666666666668,-64.616667,VG,North America
+        Canada,Ottawa,45.416666666666664,-75.700000,CA,Central America
+        Cayman Islands,George Town,19.3,-81.383333,KY,North America
+        Chile,Santiago,-33.45,-70.666667,CL,South America
+        Colombia,Bogota,4.6,-74.083333,CO,South America
+        Costa Rica,San Jose,9.933333333333334,-84.083333,CR,Central America
+        Cuba,Havana,23.116666666666667,-82.350000,CU,North America
+        Curaçao,Willemstad,12.1,-68.916667,CW,North America
+        Dominica,Roseau,15.3,-61.400000,DM,North America
+        Dominican Republic,Santo Domingo,18.466666666666665,-69.900000,DO,North America
+        Ecuador,Quito,-0.21666666666666667,-78.500000,EC,South America
+        El Salvador,San Salvador,13.7,-89.200000,SV,Central America
+        Falkland Islands,Stanley,-51.7,-57.850000,FK,South America
+        Greenland,Nuuk,64.18333333333334,-51.750000,GL,Central America
+        Grenada,Saint George's,12.05,-61.750000,GD,North America
+        Guatemala,Guatemala City,14.616666666666667,-90.516667,GT,Central America
+        Guyana,Georgetown,6.8,-58.150000,GY,South America
+        Haiti,Port-au-Prince,18.533333333333335,-72.333333,HT,North America
+        Honduras,Tegucigalpa,14.1,-87.216667,HN,Central America
+        Jamaica,Kingston,18,-76.800000,JM,North America
+        Mexico,Mexico City,19.433333333333334,-99.133333,MX,Central America
+        Montserrat,Plymouth,16.7,-62.216667,MS,North America
+        Nicaragua,Managua,12.133333333333333,-86.250000,NI,Central America
+        Panama,Panama City,8.966666666666667,-79.533333,PA,Central America
+        Paraguay,Asuncion,-25.266666666666666,-57.666667,PY,South America
+        Peru,Lima,-12.05,-77.050000,PE,South America
+        Puerto Rico,San Juan,18.466666666666665,-66.116667,PR,North America
+        Saint Barthelemy,Gustavia,17.883333333333333,-62.850000,BL,North America
+        Saint Kitts and Nevis,Basseterre,17.3,-62.716667,KN,North America
+        Saint Lucia,Castries,14,-61.000000,LC,North America
+        Saint Pierre and Miquelon,Saint-Pierre,46.766666666666666,-56.183333,PM,Central America
+        Saint Vincent and the Grenadines,Kingstown,13.133333333333333,-61.216667,VC,Central America
+        Sint Maarten,Philipsburg,18.016666666666666,-63.033333,SX,North America
+        Suriname,Paramaribo,5.833333333333333,-55.166667,SR,South America
+        Trinidad and Tobago,Port of Spain,10.65,-61.516667,TT,North America
+        Turks and Caicos Islands,Grand Turk,21.466666,-71.133333,TC,North America
+        United States,Washington D.C.,38.883333,-77.000000,US,Central America
+        Uruguay,Montevideo,-34.85,-56.166667,UY,South America
+        Venezuela,Caracas,10.483333333333333,-66.866667,VE,South America
+        US Virgin Islands,Charlotte Amalie,18.35,-64.933333,VI,North America
+
+

Map using inline CSV

-
+

Map using CSV from URL

-
+

+ This is more limited than I would like, because of cross-site scripting + blocks; the URL must be sourced from the same host as the page. +

+

Use this page as a crib for how to use GeoCSV Lite in your projects. In order @@ -50,7 +121,7 @@ crossorigin=""/ --> type="text/javascript"></script>

  • One (or more) div elements to contain your maps. It - is a requirement of Leaflet that these must have a fixed pixel width. + is a requirement of Leaflet that these must have a fixed pixel height. Each must have a distinct id;
  • For each div which you wish to contain a map view, @@ -59,14 +130,25 @@ crossorigin=""/ --> <script>geocsv_lite.core.initialise_map_element("map", "data/data.csv");</script>
    • +

    + The value passed as data-source may be CSV text, or it + may be a URL from which CSV text can be sourced. +

    @@ -80,31 +162,73 @@ crossorigin=""> diff --git a/src/geocsv_lite/core.cljs b/src/geocsv_lite/core.cljs index b6b7197..ee761eb 100644 --- a/src/geocsv_lite/core.cljs +++ b/src/geocsv_lite/core.cljs @@ -3,22 +3,36 @@ [clojure.browser.dom :as dom] [clojure.string :as cs] [geocsv-lite.data :refer [get-csv-url get-data get-query-part-as-map]] - [geocsv-lite.gis :as gis] [geocsv-lite.map :as m] [geocsv-lite.notify :as n])) (defn ^:export initialise-map-element "Create a map view in the element with this `id` and decorate it with - pins showing locations from this `data-source`." + pins showing locations from this `data-source`. If `data-source` is nil + or an empty string, the content of the element will be used, if present." [id data-source] - (n/message (str "geocsv-lite.core.initialise-map-element called with args id: " id "; data-source: " data-source ".")) + (n/message + (str + "geocsv-lite.core.initialise-map-element called with args id: " + id "; data-source: " data-source ".")) (let [sid (str id) kid (keyword sid) v (m/add-view sid 55 -4 10)] (.whenReady v (fn [] (get-data kid data-source))))) -(defonce app-state (atom {:text "Hello world!"})) +(defn ^:export initialise-map-element-from-content + [id] + (let [sid (str id) + kid (keyword sid) + v (m/add-view sid 55 -4 10)] + (.whenReady + v + (fn + [] + (get-data kid (.innerText (.getElementById js/document id))))))) + + (defn on-js-reload [] ;; optionally touch your app-state to force rerendering depending on diff --git a/src/geocsv_lite/data.cljs b/src/geocsv_lite/data.cljs index d761645..18982a4 100644 --- a/src/geocsv_lite/data.cljs +++ b/src/geocsv_lite/data.cljs @@ -49,7 +49,8 @@ (when (string? %) (cs/lower-case (cs/replace - % #"[^\w\d]+" "-"))))] + (cs/trim %) + #"[^\w\d]+" "-"))))] (keyword (if (empty? n) (gensym) @@ -90,6 +91,7 @@ "Get data for the view identified by this keyword `k` from this `data-source`. The data source may be a URL, or a CSV or JSON formatted string." [k data-source] + (js/console.debug (str "get-data: k = `" k "`; data-source = `" data-source "`")) (let [p (js->clj (.parse js/Papa data-source) :keywordize-keys true) data (if (empty? (:errors p))