Skip to content

Commit

Permalink
Version 1.11.2, corresponding to April 2018 ArcGIS Online release
Browse files Browse the repository at this point in the history
  • Loading branch information
asizer committed Apr 20, 2018
1 parent e23c155 commit 38aa0d5
Show file tree
Hide file tree
Showing 229 changed files with 5,726 additions and 1,598 deletions.
8 changes: 7 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,13 @@
{
expand: true,
cwd: 'src/app/storymaps/common/builder/ckeditor/',
src:['editor.css', 'plugins/storymapsInlineMedia/plugin.js', 'plugins/storymaps*/icons/**'],
src:[
'editor.css',
'plugins/storymapsInlineMedia/plugin.js',
'plugins/storymapsInlineMedia/icons/**',
'plugins/storymapsAction/plugin.js',
'plugins/storymapsAction/icons/**'
],
dest: 'deploy/resources/lib/ckeditor/'
}]
},
Expand Down
143 changes: 75 additions & 68 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
Story Map Series
================

The Story Map Series app lets you present a series of maps via tabs, numbered bullets, or a side accordion. In addition to maps, you can also include images, video and web content in your series to tell your story and engage your audience. For example the first tab in a tabbed series can be a compelling photo that sets the scene.
The Story Map Series app lets you present a series of maps via tabs, numbered bullets, or a side accordion. In addition to maps, you can also include images, video and web content in your series to tell your story and engage your audience. For example the first tab in a tabbed series can be a compelling photo that sets the scene. Actions can also be defined in an entry's text so that, for instance, clicking a word automatically zooms the entry's map to a particular location.

![App](map-series-storytelling-template-js.png)

Expand All @@ -13,7 +13,7 @@ The Story Map Series app lets you present a series of maps via tabs, numbered bu
[Download](http://links.esri.com/storymaps/map_series_template_zip) |
[Map Series page on Esri Story Maps website](http://links.esri.com/storymaps/map_series_app)

**Latest release is version 1.10.1**, if you want to be informed of new releases, we recommend you to watch this repository ([see GitHub help](https://help.github.com/articles/watching-repositories)). See the [release page](https://github.com/Esri/map-series-storytelling-template-js/releases) for release notes.
**Latest release is version 1.11.3**, if you want to be informed of new releases, we recommend you to watch this repository ([see GitHub help](https://help.github.com/articles/watching-repositories)). See the [release page](https://github.com/Esri/map-series-storytelling-template-js/releases) for release notes.

For more infomation about using and customizing Esri's Storytelling Apps follow the [Story Maps Developers' Corner](https://developerscorner.storymaps.arcgis.com).

Expand Down Expand Up @@ -79,72 +79,79 @@ We actively test the application in all major browsers but if you experience dif
### Tips for your content

#### Link between entries
One popular request is to add the ability to navigate between Series's entries using map features popup. This can for example allow the first entry map to be the spatial index to your story. To do that you need to download the application and include a piece of code in `index.html`, look at the end of the file and modify it as below. Follow the instructions to configure the web map and the layer that will receive the click event.
One popular request is to add the ability to navigate between a Series's entries using links in the panel or through map features popup. As of April 2018, this ability is now available in the builder.

To add a link to another entry in the narrative panel, highlight the text for which you want to create the link and use the `Naviage to an entry` action in the toolbar. See [this blog](https://blogs.esri.com/esri/arcgis/2016/09/14/whats-new-story-maps-september-2016/) for more information.

You can also add this capability to map feature popups. This can, for example, allow the first entry map to be the spatial index to your story. To do that you need to download the application and include a piece of code in `app/custom-scripts.js`. Modify that file as shown below. Follow the instructions to configure the web map and the layer that will receive the click event.



```
require(["dojo/topic"], function(topic) {
// The application is ready
topic.subscribe("tpl-ready", function(){
/* */
});
/*
* Set up a click handler on the feature of the map to navigate the story
*/
//
// *************************************
// Configure the webmap id and layer id
// *************************************
//
// First find the webmap id through the URL when you open the map in Map Viewer
// To get the layer id, paste the webmap id below and open the application,
// then open the developer console, all the layers ids will be listed,
// find the correct one and paste it below
// After this setup, clicking the 3rd feature of your layer, will navigate to the third entry
var WEBMAP_ID = "0bb11c0469f042b3afaf8b0d76572822";
var LAYER_ID = "csv_7673_0";
var clickHandlerIsSetup = false;
topic.subscribe("story-loaded-map", function(result){
if ( result.id == WEBMAP_ID && ! clickHandlerIsSetup ) {
var map = app.maps[result.id].response.map,
layer = map.getLayer(LAYER_ID);
console.log(map.graphicsLayerIds);
if ( layer ) {
layer.on("mouse-over", function(e){
map.setMapCursor("pointer");
map.infoWindow.setContent("<b>"+e.graphic.attributes.name.split(",")[0]+"</b><br/><i>Click to zoom</i>");
map.infoWindow.show(e.graphic.geometry);
});
layer.on("mouse-out", function(e){
map.setMapCursor("default");
map.infoWindow.hide();
});
layer.on("click", function(e){
var index = e.graphic.attributes["__OBJECTID"];
// Temporarily prevent the new bullet to be focused
app.isLoading = true;
topic.publish("story-navigate-entry", index);
// Set back isLoading
setTimeout(function(){
app.isLoading = false;
}, 100);
});
}
clickHandlerIsSetup = true;
}
});
define(["dojo/topic"], function(topic) {
/*
* Custom Javascript to be executed while the application is initializing goes here
*/
// The application is ready
topic.subscribe("tpl-ready", function(){
/*
* Set up a click handler on the feature of the map to navigate the story
*/
//
// *************************************
// Configure the webmap id and layer id
// *************************************
//
// First find the webmap id through the URL when you open the map in Map Viewer
// To get the layer id, paste the webmap id below and open the application,
// then open the developer console, all the layers ids will be listed,
// find the correct one and paste it below
// After this setup, clicking the 3rd feature of your layer, will navigate to the third entry
var WEBMAP_ID = "0bb11c0469f042b3afaf8b0d76572822";
var LAYER_ID = "csv_7673_0";
var clickHandlerIsSetup = false;
topic.subscribe("story-loaded-map", function(result){
if ( result.id == WEBMAP_ID && ! clickHandlerIsSetup ) {
var map = app.maps[result.id].response.map,
layer = map.getLayer(LAYER_ID);
console.log(map.graphicsLayerIds);
if ( layer ) {
layer.on("mouse-over", function(e){
map.setMapCursor("pointer");
map.infoWindow.setContent("<b>"+e.graphic.attributes.name.split(",")[0]+"</b><br/><i>Click to zoom</i>");
map.infoWindow.show(e.graphic.geometry);
});
layer.on("mouse-out", function(e){
map.setMapCursor("default");
map.infoWindow.hide();
});
layer.on("click", function(e){
var index = e.graphic.attributes["__OBJECTID"];
// Temporarily prevent the new bullet to be focused
app.isLoading = true;
topic.publish("story-navigate-entry", index);
// Set back isLoading
setTimeout(function(){
app.isLoading = false;
}, 100);
});
}
clickHandlerIsSetup = true;
}
});
});
```

Expand Down Expand Up @@ -270,9 +277,9 @@ The easiest way to find the id or path of a DOM element that you want to customi
Customization can achieved through the `style` tag already present for you in `index.html` (search for `/* CUSTOM CSS RULES */`).

## Developer guide
This developer guide is intended for developers that wants to modify the behavior or add new functionalities to the Map Series application.
This developer guide is intended for developers who want to modify the behavior of or add new functionalities to the Map Series application.
It requires knowledge of HTML, Javascript and CSS languages.
If you only need to customize look and feel, you should be able to do so using the [customize section above](#customize-the-look-and-feel).
If you only need to customize the look and feel, you should be able to do so using the [customize section above](#customize-the-look-and-feel).

### Application life cycle
Map Series fires events that allow customization with lose integration. This mean that you don't need to understand the application internals to implement simple extension.
Expand Down Expand Up @@ -413,7 +420,7 @@ Find a bug or want to request a new feature? Please let us know by submitting a
Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](https://github.com/esri/contributing).

## Licensing
Copyright 2017 Esri
Copyright 2018 Esri

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "Storymaps-MapSeries",
"version": "1.10.1",
"version": "1.11.2",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.4.0",
Expand Down
2 changes: 2 additions & 0 deletions src/app/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ app.cfg = {
TIMEOUT_VIEWER_REQUEST: 12000,
TIMEOUT_BUILDER_REQUEST: 20000,

SECTION_ACTION_ZOOM_MAP_MARKER: "resources/tpl/viewer/icons/map-pin-circle-blue.png",

// Control the social button configuration in builder
// If disabled author won't be able to activate them
// if disabled after the app has been created, this will override the settings
Expand Down
7 changes: 5 additions & 2 deletions src/app/storymaps/common/Core.js
Original file line number Diff line number Diff line change
Expand Up @@ -427,6 +427,7 @@ define(["lib-build/css!lib-app/bootstrap/css/bootstrap.min",

var section = {
title: "",
contentActions: [],
creaDate: Date.now(),
status: 'PUBLISHED',
media: {
Expand Down Expand Up @@ -884,15 +885,17 @@ define(["lib-build/css!lib-app/bootstrap/css/bootstrap.min",
}

var mapExtentFit = app.appCfg.mapExtentFit ? app.appCfg.mapExtentFit : false;
if( map.spatialReference.wkid == extent.spatialReference.wkid )
if( map.spatialReference.wkid == extent.spatialReference.wkid ) {
return map.setExtent(_mainView.getLayoutExtent(extent, false), mapExtentFit);
}
else {
var resultDeferred = new Deferred();
esriConfig.defaults.geometryService.project([extent], map.spatialReference, function(features){
if( ! features || ! features[0] )
return;

map.setExtent(_mainView.getLayoutExtent(features[0], false), mapExtentFit);
var newExtent = _mainView.getLayoutExtent(features[0], false);
map.setExtent(newExtent, mapExtentFit);
resultDeferred.resolve();
});
return resultDeferred;
Expand Down
26 changes: 25 additions & 1 deletion src/app/storymaps/common/_resources/nls/ar/core.js
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,14 @@ define({
"logoOrgRadio": "شعار المؤسسة",
"logoCustomRadio": "الشعار",
"logoCustomLabel": "الصورة:",
"logoCustomUploadHelp": "تظهر الشعارات بشكل رائع إذا كان معدل العرض:الارتفاع بين 1:1 و5:1. وإذا تم رسم شعار مرتبط ببطء. احفظ نسخة منه وقم بتحميلها هنا.",
"logoCustomUploadHelp": "يجب أن يبدأ رابط صورة الشعار بـ HTTPS. تظهر الشعارات بشكل رائع إذا كان معدل العرض:الارتفاع بين 1:1 و5:1. وإذا تم رسم شعار مرتبط ببطء، احفظ نسخة منه وقم بتحميلها هنا.",
"logoCustomUploadTooltip": "استخدم شعارًا مُحمّلاً",
"logoCustomUploadButton": "تحميل الشعار",
"logoUploadSizeError": "أبعاد GIF كبيرة للغاية. يرجى إعادة تحديد الحجم بعرض ${PIXEL-WIDTH} بكسل.",
"logoCustomLinkHTTPSError": "يجب أن يبدأ الرابط بـ HTTPS",
"logoCustomLinkTooltip": "ربط بالشعار",
"logoCustomLinkPlaceholder": "عنوان URL للصورة",
"logoCustomLinkPlaceholderHTTPS": "https://example.com/logo.jpg",
"logoUploadGenericError": "يمكن أن يكون الشعار ملف .bmp أو .gif أو .jpg أو .jpeg أو .png، ويجب أن تكون Gifs أقل من عرض 250 بكسل وحجم 10 ميجابايت.",
"logoCustomTargetPlaceholder": "صفحة ويب للفتح عند النقر على الشعار",
"logoSocialText": "سطر العلامة:",
Expand All @@ -129,6 +131,28 @@ define({
"header": {
"title": "تحرير عنوان %TPL_NAME%",
"subtitle": "تحرير العنوان الفرعي لـ %TPL_NAME%"
},
"bannerNotification": {
"learnMore": "التعرف على المزيد",
"close": "إغلاق",
"dontShowAgain": "عدم إظهار هذه الرسالة مجددًا"
},
"httpsTransitionMessage": {
"bannerMsg": "رسالة هامة حول أمن الويب وخرائط القصة",
"s1h1": "تقوم Esri الآن بتحسين أمن خرائط القصة",
"s1p1": "خرائط القصة المباشرة على الويب ومجتمع الويب يعملان دائمًا على إنشاء وتنفيذ الأمن بصورة أفضل. تظهر HTTPS، التي توفر اتصالاً آمنًا للمحتوى المرسل عبر الإنترنت، بوصفه الطريقة المتوقعة للوصول إلى محتوى الويب. يظهر الآن معظم المستعرضات الحديثة رسائل تحذيرية عند استخدام HTTP بدلاً من HTTPS. نظرً لهذا المعيار الناشيء، ابتداءً من تحديث يونيو 2018 على ArcGIS Online، سوف يتعين على خرائط القصة استخدام HTTPS.",
"s1p2": "عملياً، هذا يعني خريطة قصة وجميع محتوياته (بما في ذلك الصور، والطبقات، والتطبيقات المدمجة والمواقع) يجب أن يكون الوصول إليها باستخدام الروابط التي تبدأ بـ HTTPS بدلاً من HTTP. وهذا يضمن أفضل تجربة للقراء لأن معظم متصفحات الويب تشير إلى أن قصصك آمنة.",
"s2h1": "ماذا يتعين عليّ عمله؟",
"s2p1": "تعمل Esri على جعل هذا الانتقال سهل لمؤلفي وقراء خريطة القصة. تتوفر الأدوات الآن في منشيئي خريطة القصة والقصص الخاصة بي التي تساعدك في العثور على محتوى غير آمن (HTTP) في القصص الخاصة بك وتوفر توصيات حول كيفية معالجته. الرجاء التحقق من القصص الخاصة بك لمحتوى غير آمن والتحديث إلى HTTPS قبل يونيو 2018.",
"action1": "إغلاق",
"action2": "تحقق من القصص الخاصة بي الآن",
"action3": "تعلم المزيد"
},
"sectionNavigation": {
"select": "تحديد إدخال...",
"section": "إدخال",
"thisSection": "هذا الإدخال",
"hiddenSection": "إدخال مخفي"
}
}
});
6 changes: 5 additions & 1 deletion src/app/storymaps/common/_resources/nls/ar/media.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ define({
"webpageSelectorHome": {
"lblUrl": "رابط صفحة ويب",
"lblEmbed": "تضمين كود",
"lblMustUseHTTPS": "يجب أن تبدأ روابط محتوى الويب بـ HTTPS.",
"lblOR": "أو",
"lblError1": "خطأ، امسح أحد حقلي الإدخال.",
"lblError2": "يمكن أن تحتوي عملية تضمين كود على أحد %IFRAMETAG%",
Expand All @@ -91,7 +92,9 @@ define({
"mediaConfigure": {
"lblURL": "رابط الصورة",
"lblURLPH": "ينبغي أن ينتهي الرابط بـ .jpg، أو .png، أو .gif، أو .bmp",
"lblURLPHHTTPS": "https://www.example.com/image.jpg",
"lblURLError": "لا يبدوا أن تكون هذه الصورة صحيحة، الرجاء تحديد رابط مباشر إلى ملف صورة (سوف ينتهي عادةً عنوان URL بـ .jpg أو .png). لن تعمل الروابط على صفحة الويب التي تحتوي على صورة.",
"lblURLErrorHTTPS": "رابط الصورة غير صحيح، ويجب أن يبدأ عنوان URL بـ HTTPS وينتهي بامتداد ملف صورة مدعوم (.jpg، .png، .gif، .bmp).",
"lblURLCheck": "جارِ فحص الصورة...",
"lblLabel": "التسمية التوضيحية الصورة",
"lblLabel1": "تسمية وضيحية",
Expand All @@ -106,7 +109,7 @@ define({
"lblPosition3": "احتواء",
"lblPosition4": "توسيع",
"lblPosition5": "مخصص",
"lblURLHelp": "للحصول على أفضل النتائج، ينبغي أن تكون الصور أقل من 400 كيلو بايت. استخدم صور JPG المضغوطة بنسبة 80% جودة وعرض هذه الصور الموصى بها: 2000 بيكسل للمرحلة الأساسية أو لوحة سرد مع زر تكبير، و1000 بيكسل للوحة سرد بدون زر تكبير.<br><br>إذا تم رسم الصورة المرتبطة ببطئ، قم بتحميلها إلى القصة للحصول على أفضل النتائج.",
"lblURLHelp": "يجب أن يبدأ رابط الصورة بـ HTTPS.<br><br>للحصول على أفضل النتائج، ينبغي أن تكون الصور أقل من 400 كيلو بايت. استخدم صور JPG المضغوطة بنسبة 80% جودة وعرض هذه الصور الموصى بها: 2000 بيكسل للمرحلة الأساسية أو لوحة سرد مع زر تكبير، و1000 بيكسل للوحة سرد بدون زر تكبير.<br><br>إذا تم رسم الصورة المرتبطة ببطئ، قم بتحميلها إلى القصة للحصول على أفضل النتائج.",
"tooltipDimension": "يمكن تحديد القيمة بـ 'px' أو '%'",
"tooltipDimension2": "يجب تحديد القيمة 'بالبكسل'",
"lblPosition2Explain": "(يمكن القص)",
Expand All @@ -124,6 +127,7 @@ define({
"mapMarkerExplain": "سيرى المستخدم علامة الخريطة عند النقر على الرابط"
},
"editorActions": {
"navigate": "انتقال إلى إدخال آخر",
"remove": "إزالة الإجراء",
"preview": "معاينة الحدث"
},
Expand Down
6 changes: 6 additions & 0 deletions src/app/storymaps/common/_resources/nls/ar/webmap.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ define({
"originalWebmap": "الخريطة المستخدمة لنشر %TPL_NAME%",
"browseMaps": "تحديد خريطة",
"createMap": "خريطة.",
"noResults": "لم يتم العثور على نتائج",
"loadingResults": "جارِ التحميل...",
"current": "الخريطة الحالية",
"select": "حدد أو أنشئ خريطة",
"newMap": "خريطة محددة مُؤخرًا",
Expand Down Expand Up @@ -64,6 +66,10 @@ define({
"success": "تم حفظ الخريطة",
"successCreate": "تم إنشاء الخريطة",
"cancelTitle": "هل تريد تجاهل كل التغييرات التي لم يتم حفظها؟",
"close": "إغلاق",
"save": "حفظ",
"confirm": "نعم، أغلق الخريطة",
"deny": "لا، استمر في العمل",
"errorDuplicate": "توجد خريطة تحمل ذلك العنوان بالفعل",
"errorCreate": "يتعذر إنشاء الخريطة. يرجى إعادة المحاولة.",
"errorSave": "يتعذر حفظ الخريطة. يرجى إعادة المحاولة.",
Expand Down
Loading

0 comments on commit 38aa0d5

Please sign in to comment.