{"id":1920,"date":"2012-02-27T14:16:18","date_gmt":"2012-02-27T18:16:18","guid":{"rendered":"http:\/\/fgiasson.com\/blog\/?p=1920"},"modified":"2012-02-27T14:16:18","modified_gmt":"2012-02-27T18:16:18","slug":"new-mapping-semantic-component-in-javascript","status":"publish","type":"post","link":"https:\/\/fgiasson.com\/blog\/index.php\/2012\/02\/27\/new-mapping-semantic-component-in-javascript\/","title":{"rendered":"New Mapping Semantic Component In JavaScript"},"content":{"rendered":"<p>&nbsp;<\/p>\n<table>\n<tbody>\n<tr>\n<td>I am please to announce the release of the new <a title=\"sWebMap Semantic Component\" href=\"http:\/\/techwiki.openstructs.org\/index.php\/SWebMap\">sWebMap <\/a>Semantic Component in JavaScript. This new mapping component is a standalone JavaScript application that can be integrated on any new or existing web sites and that interact with an <a title=\"Open Semantic Framework (OSF)\" href=\"http:\/\/techwiki.openstructs.org\/index.php\/Open_Semantic_Framework\">Open Semantic Framework<\/a> (OSF) instance to search, browse, filter and display with geographically-located information on an interactive map.<\/td>\n<td><a href=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/old-world-map.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1921\" title=\"old-world-map with markers\" src=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/old-world-map.jpg\" alt=\"\" width=\"245\" height=\"188\" srcset=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/old-world-map.jpg 350w, https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/old-world-map-300x229.jpg 300w\" sizes=\"auto, (max-width: 245px) 100vw, 245px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Features<\/h3>\n<p>The sWebMap is a rich mapping tool that can easily be integrated on any webpage, and that can be extensively customized. The sWebMap does support these features:<\/p>\n<ul>\n<li>Full text search for searching and displaying results on a map<\/li>\n<li>Extensive filtering capabilities<\/li>\n<ul>\n<li>Filtering by dataset source<\/li>\n<li>Filtering by type<\/li>\n<li>Filtering by attribute\/value<\/li>\n<li>Filtering of records that belongs to a specific geographic region<\/li>\n<\/ul>\n<li>Display of record on the map using:<\/li>\n<ul>\n<li>Different markers depending on the type of record to display (determined by the ontologies)<\/li>\n<li>Polygon shapes for records that refers to a geographic region<\/li>\n<li>Polyline shapes for records that refers to a geographically-located path<\/li>\n<\/ul>\n<li>Templating of records in a resultset depending on their type<\/li>\n<li>Templating of records&#8217; preview, displayed in an overlay window, depending on their type<\/li>\n<li>Persist records on the map accros searches and filtering operations<\/li>\n<li>Supports map sessions<\/li>\n<ul>\n<li>Save map sessions<\/li>\n<li>Load saved map sessions<\/li>\n<li>Delete saved map sessions<\/li>\n<li>Share saved map sessions<\/li>\n<\/ul>\n<li>Supports a multiple-maps mode<\/li>\n<ul>\n<li>Three focus maps are available under the main map<\/li>\n<li>Each map focus on a particular region of the main map<\/li>\n<li>User can switch between focus map to see different records in different region<\/li>\n<\/ul>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Normal Mode<\/h3>\n<p>Here is what the default sWebMap, in normal mode, using a few datasets related to the city of Iowa looks like. <a title=\"sWebMap Citizen DAN Demo\" href=\"http:\/\/demo.citizen-dan.org\/webmap\">You can also interact with this sWebMap instance directly on the Citizen DAN demo website here<\/a>.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/swebmap.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1922 shadow_curl\" title=\"sWebMap - Normal Mode\" src=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/swebmap.jpg\" alt=\"\" width=\"450\" height=\"406\" srcset=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/swebmap.jpg 450w, https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/swebmap-300x270.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<h3>Multiple Windows Mode<\/h3>\n<p>Here is what the default sWebMap, in multiple windows mode, using a few datasets related to the city of Iowa looks like. <a title=\"sWebMap Citizen DAN Demo\" href=\"http:\/\/demo.citizen-dan.org\/webmapmulti\">You can also interact with this sWebMap instance directly on the Citizen DAN demo website here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/swebmap-multi.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1923 shadow_curl\" title=\"sWebMap Multiple Maps Mode\" src=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/swebmap-multi.jpg\" alt=\"\" width=\"450\" height=\"557\" srcset=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/swebmap-multi.jpg 450w, https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/02\/swebmap-multi-242x300.jpg 242w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Under the Hood: The Open Semantic Framework<\/h3>\n<p>Each sWebMap component communicates with an OSF (Open Semantic Framework) instance. More specifically, a sWebMap component will send Search\/Filtering queries to a <a title=\"Search web service endpoint (structWSF)\" href=\"http:\/\/techwiki.openstructs.org\/index.php\/Search\">geo-enabled structWSF Search web service endpoint<\/a>.<\/p>\n<p>Depending on the options you had specified when you created the sWebMap control, each time you move (option), zoom (option) or change the filtering criterias, this will send a query to the Search endpoint. The sWebMap control then requests JSON formatted resultset and display the results to the user.<\/p>\n<p>This means that to implement the sWebMap component on your website, you will need to have:<\/p>\n<ul>\n<li>a running structWSF instance<\/li>\n<li>some datasets that have geo-localized information<\/li>\n<li><a href=\"http:\/\/techwiki.openstructs.org\/index.php\/SWebMap#Schemas\">properly defined records and ontologies classes<\/a><\/li>\n<\/ul>\n<h3>Download<\/h3>\n<p>You can immediately download the entire code source from this GitHub reposiroty:<\/p>\n<p style=\"text-align: center;\"><a title=\"Download the sWebMap Component\" href=\"https:\/\/github.com\/structureddynamics\/Semantic-Components-Open-Semantic-Framework\/tree\/master\/js\/sWebMap\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1893\" title=\"download\" src=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/01\/download.png\" alt=\"\" width=\"307\" height=\"186\" srcset=\"https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/01\/download.png 511w, https:\/\/fgiasson.com\/blog\/wp-content\/uploads\/2012\/01\/download-300x181.png 300w\" sizes=\"auto, (max-width: 307px) 100vw, 307px\" \/><\/a><\/p>\n<h3>Installation<\/h3>\n<p>Installing the sWebMap component is really easy. In fact, you only have to load a few JavaScript and CSS files, to defined a <code>&lt;div&gt;&lt;\/div&gt;<\/code> container for the map, and to create a sWebMap component object, which is a single line of code.<\/p>\n<p>Additionally, you can initialize the sWebMap component with one of the multiple <a title=\"sWebMap options available\" href=\"http:\/\/techwiki.openstructs.org\/index.php\/SWebMap#Options\">options available<\/a>.<\/p>\n<p>Refer you to the <a title=\"Using and Installing sWebMap\" href=\"http:\/\/techwiki.openstructs.org\/index.php\/SWebMap#Usage\">Usage section of the sWebMap component<\/a> to know exactly how to install and setup a sWebMap component instance.<\/p>\n<h3>Resources<\/h3>\n<p>Here are some additional resources related to the sWebMap component:<\/p>\n<ul>\n<li><a title=\"sWebMap documentation\" href=\"http:\/\/techwiki.openstructs.org\/index.php\/SWebMap\">sWebMap complete documentation<\/a><\/li>\n<li><a title=\"How to Use the WebMap\" href=\"http:\/\/techwiki.openstructs.org\/index.php\/How_to_Use_the_WebMap\">sWebMap user manual<\/a><\/li>\n<li><a title=\"Open Semantic Framework (OSF) Installer\" href=\"http:\/\/techwiki.openstructs.org\/index.php\/Open_Semantic_Framework_Installer\">OSF Installer<\/a> (install the Open Semantic Framework to feed your sWebMap component)<\/li>\n<li><a title=\"sWebMap Demo (normal mode)\" href=\"http:\/\/demo.citizen-dan.org\/webmap\">sWebMap Demo (normal mode)<\/a><\/li>\n<li><a title=\"sWebMap Demo (multiple windows mode)\" href=\"http:\/\/demo.citizen-dan.org\/webmapmulti\">sWebMap Demo (multiple windows mode)<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; I am please to announce the release of the new sWebMap Semantic Component in JavaScript. This new mapping component is a standalone JavaScript application that can be integrated on any new or existing web sites and that interact with an Open Semantic Framework (OSF) instance to search, browse, filter and display with geographically-located information [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[158,159,155,157,84,153],"tags":[225,188,170,161,163],"class_list":["post-1920","post","type-post","status-publish","format-standard","hentry","category-citizen-dan","category-open-semantic-framework","category-osf-web-services","category-osf-widgets","category-semantic-web","category-structured-dynamics","tag-map","tag-osf","tag-semantic-components-2","tag-semantic-web-2","tag-structwsf-2"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1920"}],"version-history":[{"count":28,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1920\/revisions"}],"predecessor-version":[{"id":1952,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1920\/revisions\/1952"}],"wp:attachment":[{"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgiasson.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}