Showing posts with label map. Show all posts
Showing posts with label map. Show all posts

Friday, December 29, 2017

samsung gear fit 2 pro 2017, SM-R365, software tizen and hardware ; more than an Activity-tracking wristbands


The Samsung Gear Fit2 Pro has
  • a 1.5-inch 38.5mm Curved Super AMOLED, curved screen at 216 x 432 resolution 16M with full sensitive surface
  • a dual-core 1.0 GHz CPU paired with 
    •    512MB of RAM 
    •    4GB of storage, 2GB available
    •    4GB ROM
  • a battery has a 200 mAh capacity ; Lithium-ion battery
  • two buttons
  • many sensors: Accelerometer, Barometer, Gyro Sensor,  optical Heart Rate Monitor.
  • built-in GPS glonass (russian system)
  • Bluetooth connection v 4.2
  • wifi connection 802.11 b/g/n 2.4GHz
  • fast adaptative charge with a proprietary connector (2pins) USB cable
  • tizen OS (i think v 3; see below)
  • many built-in softwares with
    • ability to automatically recognize certain activities, 
    • an increasingly common feature in fitness bands and watches
    • Audio Playing Format: MP3,M4A,3GA,AAC,OGG,OGA,WAV,WMA,AMR,AWB 
  • samsung ecosystem hardware and software (samsung gear and health) on ios and android)
  • others
    • 50m water, 5ATM pressure and water environment,  IP68 rating to add MIL-STD-810G certification
    • 51.3 x 25.0 mm
    • 34g
    • Body SAR : 0.116 W/Kg

economics

price 229€
@ Orange for Christmas:
229€ and rebate from Orange 50€ and rebate from Samsung 30€ then 149€

By some estimates the company may have sold between 10 and 12 million smartwatches in its first year, and Apple is ranked third on IDC's list of top wearables vendors for the first quarter of 2016. But Samsung is fifth on that same list, claiming just a 3.6 % share of the worldwide wearables market, and that sliver is mostly comprised of Samsung's smartwatches, not fitness bands.

drawback

However, the Gear Fit 2 has one drawback that those other aforementioned bands don't have: it only works with Android smartphones (4.4 or higher) or iOS, whereas Fitbits and even Garmin devices work with a variety of mobile platforms as well as desktop software.

The Gear Fit2 Pro doesn't have a speaker.
no brightness sensor to adjust the screen brightness.

"small ≠ " with Gear fit 2 (2016):
  • GPS usable on Pro, not on Fit2. GPS is the biggest bug Sam cannot fix by firmware on Fit 2.
  • Many third party apps that worked on the Gear Fit 2 do not seem to be installable on the Gear Fit 2 Pro. 
  • u can program (see below)
  • "meilleur bracelet"; Traditional strap clasp is a very good improvement.

overall

http://www.samsung.com/uk/wearables/gear-fit2-pro-r365/SM-R365NZKABTU/
http://www.samsung.com/fr/wearables/gear-fit2-pro-s/SM-R365NZRNXEF/

https://en.wikipedia.org/wiki/Samsung_Gear_Fit_2

Apps

Spotify

music streaming and play-lists and covers... with your cellular phone or computer (and Spotify).
Samsung is also the second tech company in recent days that has partnered with Spotify to create a dedicated Spotify app for its new wearable gadget. (Pebble was the other.) So there are three options for music listening through the new wristband. You can store up to 2.5GB of music locally on the device, use the wristband as a Bluetooth remote control for other music apps on the phone, or play Spotify from your wrist — although you'll still need a phone in tow for that, at least for now.

UA RECORD

See your activity, sleep, and workout stats in one dashboard and get insight into your health and fitness levels.

MapMyRun

Plan and track your routes with real-time maps and capture every run, ride, and walk.

MyFitnessPal

Eat smarter and achieve your health goals by keeping track of the calories you consume and burn

Endomondo

Join a global community of fitness enthusiasts as you reach your running goals with personal training plans.

Speedo

for swimming
The Speedo On app is not integrated into Samsung Health, so when I swim it records the steps instead and congratulates me on my walk. I then have to manually enter my swim I to Samsung Health. I have also messaged Speedo as their app which is preinstalled on the device has an issue with swimming pace. I'm not a fast swimmer and when I click finish on the app on the device it alters the time I have been swimming, making me look like any Olympic athlete. 

battery life

Its expected battery life is better than you might expect for a wristband with a large display and GPS and BT/wifi.
  • 12h for a strong full use
  • 48h for my usual use
  • 1week for a minimum use (no GPS, no wifi, BT @ some time, screen @ level 1-2) just to record your HR and some data, no download.
Although with "Always On" I use  75% of the battery in a day (because large display)

dev; SDK

https://forum.xda-developers.com/gear-fit2-pro
http://developer.samsung.com/gear/design/watch-designer
https://www.google.fr/search?q=%22Samsung+Gear+Watch+Designer
https://www.youtube.com/watch?v=eewUuUw3c-8

Gear Watch Designer

GEAR WATCH DESIGNER NOW COVERS ALL GEAR DEVICES
1.5.1_beta - Nov 23, 2017
BETA DOWNLOAD for Win - v1.5.1
BETA DOWNLOAD for Mac - v1.5.1
JRE (Java Runtime Environment) 1.8 or later. 32-bit JRE is required if u are use Windows.

Now available for the Gear S, Gear Fit2, Gear S2, Gear S3, Gear Fit2 Pro and Gear Sport (New)
Design, produce, and distribute your own Gear watch faces without the complexity of code scripting


SDK

Samsung and Tizen provide everything you need to develop apps for Gear

The flexibility of Tizen is not limited to mobile devices but extends to other devices, including the Gear. This can be translated to developing applications that can be built using a Native or a Web approach. Whether you are a serious developer or a hobbyist, C or HTML5, building a Tizen app can suit your programming style that can be implemented across platforms.
http://developer.samsung.com/gear/develop/creating-your-first-app

samples

http://developer.samsung.com/gear/develop/samples/standalone#

tizen

it's an operating system based on the Linux kernel and the GNU C Library implementing the Linux API.
Tizen works on a wide range of Samsung devices including smartphones, tablets, in-vehicle infotainment (IVI) devices, smart TVs, PCs, smart cameras, wearable computing (such as smartwatches), Blu-ray players, printers and smart home appliances (such as refrigerators, lighting, washing machines, air conditioners, ovens/microwaves and a robotic vacuum cleaner).

Tizen is a project within the Linux Foundation and is governed by a Technical Steering Group (TSG). It is controlled by Samsung and also backed by Intel.

In late January 2013, Tizen 2.0 scored highest at the time in an HTML5 test of any browsers. R
esults for Tizen 2.2 on a Samsung device score highest overall in mobile, with a score of 497 points.

Tizen IVI (In-Vehicle Infotainment) is an operating system from the Automotive Grade Linux Workgroup. It is PC-compatible.
RT OS with security and resilience.

Its SDK is built on top of open source components,but the entire SDK is copyrighted by Samsung Electronics and under a non-free EULA.

The roots of Tizen date back to 2007 with the creation of the LiMo Foundation. The LiMo project resulted in the LiMo Platform in 2009 but it was unsuccessful against rival open source platforms from the Open Handset Alliance (led by Google) and Symbian Foundation (led by Nokia).

As of 2016 Samsung is planning on making Tizen its main operating system on all smartphones, replacing Android.
On May 15, 2017 Samsung unveiled its fourth smartphone powered by Tizen operating system in India, the Samsung Z4 which launched in India that comes with 4.5 inch of LCD displays which is protected by 2.5D curved glass, it has 1GB of RAM, 1.5Ghz Quad-Core Arm cortexA-7 based Spreadtrum processor (SC9830A), 8GB of ROM, 5 MP rear camera with dual flash and 5MP front camera with flash. It has Operating system of Tizen which is Tizen 3.0.

As of Q1 2017 Tizen is second largest smartwatch platform, behind watchOS and ahead of Android Wear.
On May 31, 2017, Tizen released Tizen 4.0 Public M1 Release Notes.

https://en.wikipedia.org/wiki/Tizen

in french

C'est Samsung qui est à l'origine de Tizen, en collaborant avec le projet EFL (Enlightenment Foundation Libraries) et plus précisément son développeur principal, Carsten Haitzler (« Rasterman »). 
Le projet a été nommé LiMo (Linux Mobile) pendant de nombreuses années, puis rebaptisé Tizen en septembre 2011 lorsque Intel s'y est ajouté après son échec sur MeeGo.
Contrairement à Android, Tizen est un projet décentralisé : chaque fabricant ou opérateur aura une interface utilisateur spécifique, développée avec EFL.
Les applications Android sont compatibles Tizen grâce à un clone de la machine virtuelle Dalvik. La performance des applications Android sur Tizen est donc identique par rapport à Android. Deux services permettent aux développeurs de publier une application Android sur le Tizen Store : Infraware et OpenMobile.

En conclusion, Tizen donne accès à quatre types d'applications :

  •     les applications natives Tizen (C, C++, Python, Lua) ;
  •     les applications web, sans navigateur (HTML5, JavaScript);
  •     les applications hybrides ;
  •     les applications Android publiées sur le Tizen Store.

list of Devices


Sunday, January 29, 2017

Django, python framework. Example umap; create maps with OpenStreetMap layers in a minute and embed them in your site


Write a web site with app.
Use a Python Web framework, Django .
Write your first Django app

Installed Django already? Good. Now try this tutorial, which walks you through creating a basic poll application.
https://docs.djangoproject.com/en/1.10/intro/tutorial01/
It’s got two parts:

  • A public site that lets people view polls and vote in them.
  • An administrative interface that lets you add, change and delete polls.

Django

With Django, you can take Web applications from concept to launch in a matter of hours. Django takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.
https://www.djangoproject.com/start/overview/

Being a Python Web framework, Django requires Python. See What Python version can I use with Django? for details. Python includes a lightweight database called SQLite...

uMap

uMap lets you create maps with OpenStreetMap layers in a minute and embed them in your site.

Because we think that the more OSM will be used, the more OSM will be ''cured''. It uses django-leaflet-storage and Leaflet.Storage, built on top of Django and Leaflet.

https://github.com/umap-project/umap/
http://wiki.openstreetmap.org/wiki/UMap

https://umap-project.readthedocs.io/en/latest/install/


Sunday, January 8, 2017

Manylines, a graph web publication platform with storytelling features



Manylines, a graph web publication platform with storytelling features

Explore networks and publish narratives.

keywords: Graph web publication platform, Visualization, Graph interpretation, Interactive story

More and more people work with graphs nowadays, but it is not always easy to publish and share the graph interpretation on the web.

Manylines is a web tool built at Sciences Po médialab to solve this issue.
See: http://tools.medialab.sciences-po.fr/manylines

Some researchers and students use network visualizations to explore their data, but networks are not as clear as maps and sharing one’s interpretation is difficult. 
Manylines main innovation is to allow the user to explain and share a narrative about his network: an interactive story where each “slide” is a particular zoom, pan and filtering of the network, completed by a title and description, with fluid transitions like in Prezi.
Published as an open source prototype with the source code available on GitHub, Manylines is currently built around three screens:

– The first screen allows applying the ForceAtlas2 layout to the network, in order to settle the “basemap”: the definitive positions of nodes and edges used to support further interpretations.
– The second screen allows zooming and filtering the network to explore the data and“take snapshots” representing different insights.
– The third screen allows composing narratives by building a series of snapshots, adding a title and short description for each step.

The result is an interactive slideshow widget where the user’s exploration of the network is guided step by step, revealing the key interpretation points one by one. Manylines is a single webpage app built for HTML5 browsers. It makes an extensive use of the sigma.js library to deal with networks within the browser and it implements different features inspired from Gephi, the reference desktop graph viz platform. The WebGL visualization (with Canvas fallback) implemented by Sigma.js allows great performance for networks up to 1000 nodes on an average computer.
To reach this level of performance, we optimized the javascript version of the ForceAtlas2 algorithm used by sigma.js. We ported it to use web workers and we optimized the Barnes-Hut quadtree approximation in this context by implementing it as an iterative and not recursive process. We made an extensive use of sigma.js’ custom renderers and cameras to build dynamic graph thumbnails, snapshots and widgets.
The server side stores the networks, snapshots and narrative data in a Couchbase database(which we discovered in FOSDEM 2014) accessed by a Node.js express REST API.

http://www.medialab.sciences-po.fr/
http://lab.medialab.sciences-po.fr/#hyphe
http://tools.medialab.sciences-po.fr/manylines
https://github.com/medialab/manylines
http://medialab.github.io/manylines/
https://github.com/medialab

Manylines was presented at FOSDEM 2015 in the Graph processing room. You’ll find in our presentation a guided tour of the sexual behaviours wikipedia articles network !

https://spire.sciencespo.fr/hdl:/2441/3d7ot2o3ts9sjbm88ddvnh5ut8

Friday, December 23, 2016

courte analyse du code "markdown odyssey.js" et ajout popup tooltip icon



http://cartodb.github.io/odyssey.js/

il y a des fonctionnalités "cachées" (c'est du leaflet.js):

pour avoir des tooltips (hover) et popup, on peut faire dans le markdown:
L.marker([40.7348, -73.9970],{title:"I am a tooltip"}).bindPopup("<b>Hello world!</b><br>I am a popup.").actions.addRemove(S.map)

et une fonction associée:
L.marker([40.7348, -73.9970]).on("click", function(e){alert("You clicked the map at " + e.latlng);}).actions.addTo(S.map)
Ici cela ouvre une fenêtre "alert" (avec un bouton "OK"):
          cartodb.github.io indique :
          You clicked the map at LatLng(40.7348, -73.997)

Ref: https://github.com/CartoDB/odyssey.js/issues/171

on a aussi :
ce que fait le bouton "add":
L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
Creates an action that adds the marker instance to the specified map when the story enters in the action and removes when the story leaves it.
mais on a aussi:
L.marker([37.8250, -122.0430]).actions.addTo(S.map)

http://cartodb.github.io/odyssey.js/documentation/#leaflet-object
On peut donc mettre du html après L.marker dans le fichier markdown avec la structure leaflet.js.

pour de l'audio:
L.marker([44.7348, -67.5645],{title:"I am a tooltip", opacity: 0.5}).bindPopup('<b>Hello world</b><br>  <mark> blue </mark><span style="color:blue">blue</span>..............................................................................................<br><audio controls autoplay loop> <source src="http://www.zapsplat.com/wp-content/uploads/2015/sound-effects-blastwave-fx/Blastwave_FX_ChurchBells_BW.60957.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio>').actions.addRemove(S.map)

pour un lien vers une image:
L.marker([40.7348, -73.9970],{title:"I am a tooltip", opacity: 0.7}).bindPopup('<b>Hello world</b><br>
<span style="color:blue">blue</span>..........................................................................................<br>
<a href="http://farm6.staticflickr.com/5344/25373090639_4a33c061fe_h.jpg"><img src="http://farm6.staticflickr.com/5344/25373090639_4a33c061fe_n.jpg" alt="Icon"></a>').actions.addRemove(S.map)

pour les video youtube par exemple:
<iframe width="480" height="360"src="https://www.youtube.com/embed/AekYJ62Knno?autoplay=1"></iframe>
elle déborde en largeur car pour la fenêtre popup, par défaut
maxWidth= 300 Max width of the popup.
minWidth= 50 Min width of the popup.
maxHeight= null If set, creates a scrollable container of the given height inside a popup if its content exceeds it.
http://leafletjs.com/reference.html#popup


Si le media dépasse 340px de large, il faut passer à autre chose qu'un simple bindPopup("<b>Hello world!</b><br>") mais aller en plus dans les options du popup:
L.marker([44.7348,-69.96]).bindPopup(L.popup({maxWidth:500}).setContent(
'<b>video with width=480 and L.popup maxWidth:500 </b><mark>OK</mark><br><span style="color:blue">blue</span>...<br><iframe width="480" height="360" src="https://www.youtube.com/embed/AekYJ62Knno?autoplay=1"></iframe>'
)).actions.addRemove(S.map)

utiliser maxWidth: "auto"

pour une video
L.marker([44.7348,-68.96],{title:"I am a tooltip for video", opacity: 0.7}).bindPopup(L.popup({maxWidth:500}).setContent('<b>video with width=480 and L.popup maxWidth:500 </b><mark>OK</mark><br><span style="color:blue">blue</span>...........................................................................<br><iframe width="480" height="360" src="https://www.youtube.com/embed/QmES8eumLa8?autoplay=1"></iframe>')).actions.addRemove(S.map)

pour l'icône des marqueurs:
L.marker([44.7348, -67.5655], {icon:L.icon({iconUrl:'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue7.png',iconSize: [22, 40], iconAnchor: [12, 39]})}).actions.addRemove(S.map)
```
L.marker([44.7348, -67.5655], {icon:L.icon({iconUrl:'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue7.png',iconSize: [22, 40], iconAnchor: [12, 39]})}).actions.addRemove(S.map)


**from GitHub**
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue7.png


**from your blogspot**
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWF7sYMJQpYwjWXRtpJPXgwB-HSk7dsbWlwlJ_KROyrSKKY70rwi5X_IHO49XjA77L1gfTDMzfHNsXKxQH6vAE6u467Sm0e1-LajztXNlJ4KVvdRPD40zKnwydqONHXWN1Xq1vS4TO5bT/s1600/church-2.png

**random with Placeholder Images **
L.marker([44.7348, -67.5655], {icon:L.icon({iconUrl:'http://lorempixel.com/64/64/',})}).actions.addRemove(S.map)

Sandbox html: cartodb.github.io/odyssey.js/sandbox

Lorsque l'on arrive sur la page  "slides" "Your first odyssey.js story", nous avons sur une page html (avec CSS et javascript interne et externe) hébergé par GitHub que tout compte peut réaliser de type:
http://cartodb.github.io/odyssey.js/sandbox avec username.github.io puis sa repository.

Dans le head, le titre de cette page est <title>Odyssey.js Sandbox</title>

A/ La liste des librairies js utilisées dans le "head":

http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js
    https://modernizr.com/
    Modernizr tells you what HTML, CSS and JavaScript features 
    the user’s browser has to offer.
   dec 2016=latest version:  3.3.1

B/dans les scripts:

http://d3js.org/queue.v1.min.js
       Data-Driven Documents= D3; https://d3js.org/
       D3.js has been extensively used for GIS map making, managing both GeoJSON 
       and Topojson files as input.   https://en.wikipedia.org/wiki/D3.js
http://cartodb.github.io/odyssey.js/dist/odyssey.js
http://cartodb.github.io/odyssey.js/vendor/d3.js
    version: "3.3.10";  dec 2016= the latest version (4.4.0)
http://cartodb.github.io/odyssey.js/vendor/codemirror/codemirror.js
http://cartodb.github.io/odyssey.js/vendor/codemirror-markdown.js
    // CodeMirror version 3.22
    // CodeMirror is the only global var we claim
   CodeMirror is a versatile text editor implemented in JavaScript for the browser. 

   It is specialized for editing code, and comes with a number of language modes
   (>100, also Markdown) and addons 

   that implement more advanced editing functionality.
   It is the editor used in the dev tools for both Firefox and Chrome

    https://codemirror.net/
  Cela permet d'avoir le code markdown en couleur...
http://cartodb.github.io/odyssey.js/vendor/jszip.js
    les fonctions .zip (bouton "download story" qui sauve en .zip
http://cartodb.github.io/odyssey.js/vendor/ZeroClipboard.min.js
    * The ZeroClipboard library provides an easy way to copy text to the clipboard 
       using an invisible Adobe Flash movie and a JavaScript interface.
     * http://zeroclipboard.org/
     * v1.3.5  (now dec 2016, Current config: v2.2.0)
http://cartodb.github.io/odyssey.js/dist/sandbox.js
../vendor/jquery-1.10.2.min.js/vendor/jquery.imageload.js;
./vendor/jquery.spriteanim.js
célèbre jquery librairie...

Juste un mot sur ce
odyssey.js/vendor/markdown.js (un fork)
qui est de 2013/09:
https://github.com/cadorn/markdown-js
https://github.com/evilstreak/markdown-js/

C'est un analyseur markdown pour JavaScript. 
Vous entrez du markdown et obtenez du HTML en out. 
Quelques points de vue sur le code: 
  • produire du HTML bien formé. Cela signifie que em et strong nesting est important, de même que la capacité de sortie en tant que HTML et XHTML 
  • une représentation intermédiaire pour permettre le traitement des données analysées (nous avons en fait deux, à la fois JsonML: un arbre markdown et un arbre HTML )http://www.jsonml.org/ JSON Markup Language (JsonML).
  • Étant facilement extensible pour ajouter de nouveaux dialectes sans avoir à réécrire la mécanique d'analyse entière.
  • il est bien documenté...
a fonction fondamentale est "markdown.toHTML"
Dans odyssey.js, il y est 5 fois:
aux lignes 1071 :
_slide.html = function() {
    if (!html) {
      html = markdown.toHTML(['markdown'].concat(md_tree));
    }
    return html;
  };
5389:
/**
* toHTMLTree( markdown, [dialect] ) -> JsonML
* toHTMLTree( md_tree ) -> JsonML
* - markdown (String): markdown string to parse
* - dialect (String | Dialect): the dialect to use, defaults to gruber
* - md_tree (Markdown.JsonML): parsed markdown tree
*
* Turn markdown into HTML, represented as a JsonML tree. If a string is given
* to this function, it is first parsed into a markdown tree by calling
* [[parse]].
**/
Markdown.toHTMLTree = function toHTMLTree( input, dialect , options ) {
5418:
/**
* toHTML( markdown, [dialect] ) -> String
* toHTML( md_tree ) -> String
* - markdown (String): markdown string to parse
* - md_tree (Markdown.JsonML): parsed markdown tree
*
* Take markdown (either as a string or as a JsonML tree) and run it through
* [[toHTMLTree]] then turn it into a well-formated HTML fragment.
**/
Markdown.toHTML = function toHTML( source , dialect , options ) {

6724:

expose.toHTML = Markdown.toHTML;
  expose.toHTMLTree = Markdown.toHTMLTree;

C/ un petit js de 10lignes

 initAnim

Dans le body

un iframe qui renvoie sur un html pour l'initialisation
http://cartodb.github.io/odyssey.js/sandbox/slides.html

et 2 div dont le "share_dialog" d'inialisation

----
Si on inspecte les éléments DOM avec le CSS.
Il y a 4 grandes structures.
Dans la iframe
  1. "map" class="leaflet-container leaflet-fade-anim"
    div class="leaflet-map-pane"
    (carte "baseMap liée au début du fichier markdown)
  2. "slides_container"
    le cadre avec texte de l'histoire qui s'affiche
    qui contient 3 sous-cadres:
    • "dots" pour aller d'une slide à l'autre
    • "slides" la narration avec le texte+image+URL
    • "navButtons" les flèches préc et suivante
  3. "credits": c'est la barre en bas avec "title et "author" (liés au début du fichier markdown)
Après les scripts, on a un div "editor_modal". 
Ce cadre/DOM contient 4 div:
  1. "header" (barre en haut) qui contient 2 choses
    • un bouton "expandButton" qui étend ou réduit cette fenêtre
    • un bouton "show_slide"qui renvoie sur la page de choix du template slides/scroll...
  2. "options" qui est la barre d'en bas qui contient 2 <ul> (<ul> tag defines an unordered (bulleted) list) qui ont des popups:
    1. "h_left" : bouton "?" qui renvoie sur l'URL documentation" et
                      bouton qui renvoie sur "change map"
    2. "h_right" : avec les 3 boutons en bas à droite   qui renvoie  sur des events "toggle collapse mode", "download story" et "share story".
  3. "actions_bar"  (barre à gauche)
    il y a un ::before et ::after car c'est une zone qui se déroule.
    L'apparence y montre les boutons qui permettent 3 choix dont mettre un marqueur  sur la carte
    mais en fait ces boutons forment une classe "actionButton".
  4.  class="CodeMirror cm-s-default CodeMirror-wrap"
    il y a un ::before et ::after car c'est une zone qui se déroule.
    Elle contient des zones "collapsées" de la structure de codemirror, mais 3 structures y sont:
    • "CodeMirror-vscrollbar" sur la droite
    • "CodeMirror-scroll"  qui contient le texte
    •  "actionButton" sur la gauche avec 3 choix dont mettre un marqueur  sur la carte

En fait la liste des dépendances est plus importante:
https://libraries.io/github/CartoDB/odyssey.js

 package.json
RequirementsLatest StableLatest ReleaseLicenses
browserify^4.1.513.1.113.1.1MIT
d33.3.104.4.04.4.0BSD-3-Clause
hammerjs~1.1.32.0.82.0.8MIT
phantomjs~1.9.02.1.72.1.7Apache-2.0
smash0.00.0.150.0.15BSD-3-Clause
https://libraries.io/npm/hammerjs
A javascript library for multi-touch gestures
https://libraries.io/npm/phantomjs
Headless WebKit with JS API
https://libraries.io/npm/smash
Concatenate files together using import statements.
This project has been marked as deprecated and is not recommended for use anymore.



analysis of JS: create your own Storymap with leaflet and hosted by GitHub Pages



Scroll-driven story map, with point markers and narrative text in GeoJSON, using Leaflet and jQuery
https://github.com/jackdougherty/leaflet-storymap

Features

Scroll-driven navigation, using screen swipe, trackpad, or keyboard down-arrow. Initial map displays all point markers.
Viewers can pan and zoom the map independently of the narration, or click on any point to go directly to that chapter.
Easy-to-learn template to create your own storymap.
Upload text, point coordinates, zoom levels, and image links to a CSV generic spreadsheet, and drag into http://geojson.io to create a GeoJSON data file.
Images can be stored in local subfolder or pulled from an external URL.

Limitations

Due to GeoJSON data limitations, there is no easy way to insert hyperlinks inside the 'description' text. They must be created outside, in fields such as "source-link" (see below in "comment")

Requires open-source libraries

Now use the plugin leaflet.extra-markers to create a marker like this:

  // Creates a red marker with the coffee icon
  var redMarker = L.ExtraMarkers.icon({
    icon: 'fa-coffee',
    markerColor: 'red',
    shape: 'square',
    prefix: 'fa'
  });

  L.marker([51.941196,4.512291], {icon: redMarker,}).addTo(map);

Comments

The Leafet 1.x code includes a 'fly to' feature that animates the distance traveled from one map point to the next. Users with some coding skills can easily modify the background map, or add map overlays, or extend the code by adding new features.

Click on map.geoJSON. You can directly open the map in GitHub.

Click on map.CSV. You can directly open the tab in GitHub.

The structure of the HTML:
div "title"
div "narration"

  • "contents"
    • "space-at-the-top"
    • "container1"
    • "container2",  etc...
Dans chaque container1:
<div id="container1" class="image-container inFocus">
  • <p class="chapter-header">Hartford Public High School 1847</p>
  • <div class="img-holder"><img src="img/1847-HPHS-Catalog1904p164.jpg"></div>
    <a href="https://www.flickr.com/photos/56513965@N06/21047067205" target="_blank" class="source">
    Source: HPHS Quadrennial Catalogue 1904</a>
  • <p class="description">This scroll-driven storymap is built on an open-source Leaflet template. The design is ideal for telling a story that narrates different locations on a map. Or users can click any marker point to go directly to the chapter narrative.</p>
</div>

it's a small JS.

// create map
// loads the GeoJSON map data file from a local folder

  1.  // first, creates numerical icons to match the ID numbers avec ExtraMarkers.icon and put on the map (layer.setIcon)
  2. // creates the contents of each chapter from the GeoJSON data. Unwanted items can be removed, and new ones can be added. Rem: It's easy to add new structure.
  3. // Calculating total height of blocks above active
  4. Only one scroll for all slides (in "contents")
    Where there is an event  scroll of "contents", you have this js:
    $('div#contents').scroll(function() {
               if ($(this).scrollTop() >= areaTop && $(this).scrollTop() < areaBottom) {
                  $('.image-container').removeClass("inFocus").addClass("outFocus");
                  $('div#container' + feature.properties['id']).addClass("inFocus").removeClass("outFocus");

                  map.flyTo([feature.geometry.coordinates[1], feature.geometry.coordinates[0] ], feature.properties['zoom']);
                }
              });
  5. map.flyTo is only available with leaflet v1
    Sets the view of the map (geographical center and zoom) performing a smooth pan-zoom animation.
    http://leafletjs.com/reference-1.0.0.html#map-flyto
  6. end (initMap)

Tuto

Before you begin, review previous tutorials in this book:
  • Edit and Host Code Templates with GitHub
  • Create and Convert Map Data with GeoJson.io
Go to the GitHub repository template (https://github.com/jackdougherty/leaflet-storymap) and fork a copy of this repo to your own GitHub account. Requires signup for a free GitHub account. 
Reminder: if you have already forked one copy, go to your GitHub repository Settings to rename or delete the first copy, so that you may create a second copy.

Go to your copy on GitHub and click the "download" button to create a zipped (compressed) copy on your local computer. On most computers, double-click to unzip the folder.

The input

The map.csv file contains the map data in an easy-to-edit format. 

Open map.csv with any spreadsheet tool and replace the existing data with your own.

The structure is:
  1. id -- Assign numbers 1, 2, 3. . to each point, in desired order of appearance.
  2. chapter -- Add title for each section of the narrative.
  3. zoom -- Insert a zoom level for each chapter, usually between 11 (zoomed out) and 18 (zoomed in).
  4. image -- If storing images in local "img" folder, follow this format: img/photo1.jpg. Or if loading images from an external site, insert the full URL. Currently, images must be about 300px wide and roughly similar height.
  5. source-credit -- Add caption to credit the origin of the image. Write in this format: Source: ABC or leave blank if none.
  6. source-link -- Add a URL to make the source-credit appear as a hyperlink, or leave blank if none. (If you want a link in your text, you must put here)
  7. description -- Add text to display in the narrative. Currently, the length is not adjustable.
  8. lon and lat -- Insert the longitude and latitude coordinates of each point. 

To find coordinates in Google Maps, right-click any point and select What's Here. Reminder: Google Maps stores points in lat-lon format, but GeoJSON stores them in the reverse order (lon-lat, the same as X-Y coordinates in mathematics), so enter carefully into the map.csv spreadsheet.
Save the spreadsheet in CSV format. 

Open geojson.io in a browser.

Drag in the map.csv file to inspect your point data. 
To export, save in GeoJSON format, and the browser will download a file named: map.geojson.

Go to your forked repository of leaflet-storymap 

Go to your forked repository of leaflet-storymap in your GitHub.com account. Click on 'branches' and keep the master branch, but delete any others (such as gh-pages and/or dev).
In the master branch of your repo, click on Upload Files button, upload the two new files you created on your local computer, and replace the existing files with those names.
map.csv
map.geojson
  1. In your master branch, click on the index.html file, 
  2. click on the pencil icon to turn on the editor, and edit lines 7 and 22 to change the titles that will be displayed. 
  3. When done, scroll down and click the clean Commit Changes button to save your edits to the master branch.
Host your storymap code on the live web with GitHub Pages. At the top level of your repo on GitHub.com, select the master branch drop-down menu, and type in this new branch name: gh-pages. When you first create this branch, it contents may take several minutes to appear the first time on the public web, but updates will take only seconds to appear. Your public URL follows this format: http://USERNAME.github.io/REPO_NAME.
Learn more about how to edit your GitHub branches and make 'pull requests' to save changes from one branch to the other in the GitHub section in this book.

https://www.datavizforall.org/leaflet/storymap/#leaflet-point-storymap-with-scrolling-narrative


leaflet L.marker and its options


Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 37 KB of gzipped JS code, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too. It can be extended with a huge amount of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.
https://github.com/Leaflet/Leaflet

marker

http://leafletjs.com/reference-1.0.2.html#marker



Thursday, December 22, 2016

Les restrictions Google Maps avec un clé (key) gratuite.


On n'a pas accès à:
Google Maps Directions API
Google Maps Distance Matrix API
Google Maps Roads API
Google Maps Time Zone API

Google Places API Web Service 150 000 free requests per day (after credit card validation).

Ref:
https://developers.google.com/maps/pricing-and-plans/#details

Un post de fin 2016

Voir les services associés à la clé (pour le suivi des nombres de map):
https://maps-apis.googleblog.com/2016/10/key-improvements-for-your-maps-api.html

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

Monday, December 19, 2016

exemple de géo-données open data avec ANFR pour la localisation et détails sur les antennes "téléphone"


https://data.anfr.fr/page/home/

Formats de fichiers plats

CSV  Jeu de données entier   Seulement les 1 enregistrements sélectionnés
JSON  Jeu de données entier   Seulement les 1 enregistrements sélectionnés
Excel  Jeu de données entier   Seulement les 1 enregistrements sélectionnés

Formats de fichiers géographiques

GeoJSON  Jeu de données entier   Seulement les 1 enregistrements sélectionnés
Shapefile  Jeu de données entier   Seulement les 1 enregistrements sélectionnés
KML  Jeu de données entier   Seulement les 1 enregistrements sélectionnés

Wednesday, December 14, 2016

webGL, large datasets, map and Reactive Programming Model


mapbox gl

https://github.com/mapbox/mapbox-gl-js
see my posts "mapbox" on this blog.

MapboxGL-js provides impressive vector tile rendering capabilities. Although the Mapbox vector tile specification is open source, there aren't yet very many free alternatives to Mapbox's paid vector tile API. Because of this, the examples (of deck.gl) don't use the paid vector tile API and instead use map tiles by Stamen Design, under CC BY 3.0 and data by OpenStreetMap, under ODbL.

deck gl 

deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.
deck.gl is designed to make visualization of large data sets simple. It enables users to quickly get impressive visual results with limited effort through composition of existing layers, while offering a complete architecture for packaging advanced WebGL based visualizations as reusable JavaScript layers.
https://github.com/uber/deck.gl
http://uber.github.io/deck.gl/#/

Understanding the Reactive Programming Model
  • The key to writing good, performant deck.gl layers lies in understanding how to minimize updates and redundant calculations.
  • It is important to understand the implications of the shallow equality comparisons deck.gl performs on layer properties, and how this implies that new data and property objects must only be created when the underlying data actually changes in order to prevent unnecessary updates.
  • There is an impressive amount of information (documentation, blog posts, educational videos, etc.) on the reactive programming paradigm in relation to modern web frameworks such as React, Flux and Redux. Where to start depends mostly on your application architecture choices.

Understanding WebGL

This is only needed if you want to create custom layers in deck.gl. Note that while trying out a new ambitious rendering approach for a new layer will likely require deeper knowledge, it is often possible to modify or extend existing deck.gl layers (including modifying the shader code) with a surprisingly limited amount of WebGL knowledge.
There are many web resources for learning WebGL. The luma.gl documentation can be a starting point.

luma gl

luma.gl versions of the classic "Learning WebGL" lessons: